javascript - 为什么 babel-loader 不转换对象休息/传播?
问题描述
我最近在我的一个项目中发现,在使用对象休息/扩展语法后,我的几乎所有 JS 代码在 Edge 18 中都会中断。这让我感到惊讶,因为我预计 babel 会将其转换为与 Edge 兼容的代码,但我发现它没有。所以去了@babel/plugin-proposal-object-rest-spread并将它添加到我的 webpack 配置中并再次重新运行 webpack。但没有运气。我使用 babel 的 debug 选项来检查插件是否被实际使用,并且输出显示它确实使用了。但是当我检查转译的 JS 时,我仍然发现其中的传播语法完全没有受到影响。
Babel 调试输出:
Using targets:
{
"android": "4.4",
"chrome": "74",
"edge": "17",
"firefox": "67",
"ios": "10",
"safari": "10"
}
Using modules transform: false
Using plugins:
transform-template-literals { "android":"4.4", "ios":"10", "safari":"10" }
transform-literals { "android":"4.4" }
transform-function-name { "android":"4.4", "edge":"17" }
transform-arrow-functions { "android":"4.4" }
transform-block-scoped-functions { "android":"4.4" }
transform-classes { "android":"4.4" }
transform-object-super { "android":"4.4" }
transform-shorthand-properties { "android":"4.4" }
transform-duplicate-keys { "android":"4.4" }
transform-computed-properties { "android":"4.4" }
transform-for-of { "android":"4.4" }
transform-sticky-regex { "android":"4.4" }
transform-dotall-regex { "android":"4.4", "edge":"17", "firefox":"67", "ios":"10", "safari":"10" }
transform-unicode-regex { "android":"4.4", "ios":"10", "safari":"10" }
transform-spread { "android":"4.4" }
transform-parameters { "android":"4.4", "edge":"17" }
transform-destructuring { "android":"4.4", "edge":"17" }
transform-block-scoping { "android":"4.4", "ios":"10", "safari":"10" }
transform-new-target { "android":"4.4" }
transform-regenerator { "android":"4.4" }
transform-exponentiation-operator { "android":"4.4", "ios":"10", "safari":"10" }
transform-async-to-generator { "android":"4.4", "ios":"10", "safari":"10" }
proposal-async-generator-functions { "android":"4.4", "edge":"17", "ios":"10", "safari":"10" }
proposal-object-rest-spread { "android":"4.4", "edge":"17", "ios":"10", "safari":"10" }
proposal-unicode-property-regex { "android":"4.4", "edge":"17", "firefox":"67", "ios":"10", "safari":"10" }
proposal-json-strings { "android":"4.4", "edge":"17", "ios":"10", "safari":"10" }
proposal-optional-catch-binding { "android":"4.4", "edge":"17", "ios":"10", "safari":"10" }
transform-named-capturing-groups-regex { "android":"4.4", "edge":"17", "firefox":"67", "ios":"10", "safari":"10" }
Using polyfills with `usage` option:
[/app/node_modules/swiper/dist/js/swiper.esm.js] Added following core-js polyfills:
es.array.concat { "android":"4.4" }
es.array.filter { "android":"4.4" }
es.array.find { "android":"4.4" }
es.array.includes { "android":"4.4" }
es.array.index-of { "android":"4.4" }
es.array.map { "android":"4.4" }
es.array.slice { "android":"4.4" }
es.array.sort { "android":"4.4", "ios":"10", "safari":"10" }
es.array.splice { "android":"4.4" }
es.object.get-own-property-descriptor { "android":"4.4" }
es.object.keys { "android":"4.4" }
es.object.to-string { "android":"4.4" }
es.parse-float { "android":"4.4" }
es.parse-int { "android":"4.4" }
es.regexp.to-string { "android":"4.4", "edge":"17" }
es.string.includes { "android":"4.4", "edge":"17" }
es.string.match { "android":"4.4", "edge":"17" }
es.string.replace { "android":"4.4", "edge":"17", "firefox":"67", "ios":"10", "safari":"10" }
es.string.split { "android":"4.4", "edge":"17" }
esnext.array.last-index { "android":"4.4", "chrome":"74", "edge":"17", "firefox":"67", "ios":"10", "safari":"10" }
web.dom-collections.for-each { "android":"4.4" }
64% building 687/752 modules 65 active /app/node_modules/lodash-es/padStart.js
[/app/node_modules/dom7/dist/dom7.modular.js] Added following core-js polyfills:
es.array.concat { "android":"4.4" }
es.array.filter { "android":"4.4" }
es.array.index-of { "android":"4.4" }
es.array.splice { "android":"4.4" }
es.object.assign { "android":"4.4" }
es.object.keys { "android":"4.4" }
es.parse-float { "android":"4.4" }
es.string.match { "android":"4.4", "edge":"17" }
es.string.replace { "android":"4.4", "edge":"17", "firefox":"67", "ios":"10", "safari":"10" }
es.string.split { "android":"4.4", "edge":"17" }
es.string.trim { "android":"4.4", "ios":"10", "safari":"10" }
web.dom-collections.for-each { "android":"4.4" }
Hash: b3541120009438066b1e
Version: webpack 4.30.0 / grunt-webpack 3.1.3
因此,从那时起,我拼命尝试让 babel 转译代码,但没有任何反应,而且我的想法和搜索词都用完了。更奇怪的是,我使用的堆栈并没有什么特别之处,而且我已经在其他项目中使用过它并且从未遇到过这个问题。
我正在使用 Vue、Webpack + Babel。Webpack 通过 Grunt 运行。
我的 webpack 配置:
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = function (grunt, options) {
/* skip loading if task is not necessary for current target */
if (!grunt.isConfigLoadingRequired('webpack')) {
return {};
}
return (function () {
const path = require('path');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const DotenvPlugin = require('dotenv-webpack');
const webpack = require('webpack');
const plugins = [
new webpack.IgnorePlugin(/^(.*)$/, /node-jsb$/),
new DotenvPlugin(),
new VueLoaderPlugin(),
];
/* remember to update jest transformer at tests/setup/ when changing loader options */
const getLoaderRulesConfig = (targets, debug = false) => ([
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.js$/,
enforce: 'pre',
loader: 'import-glob',
include: [path.resolve('<%= paths.src %>')],
},
{
test: /\.js$/,
loader: 'babel-loader',
/* remember to update jest transformIgnorePatterns at grunt/config/jest.js when adding includes */
include: [
path.resolve('<%= paths.src %>'),
path.resolve('node_modules/dom7'),
path.resolve('node_modules/swiper'),
],
options: {
compact: true,
cacheDirectory: true,
cacheCompression: false,
babelrc: false,
plugins: [
[
'@babel/plugin-transform-runtime', {
regenerator: false,
useESModules: true,
},
],
'@babel/plugin-proposal-object-rest-spread',
['@babel/plugin-proposal-class-properties', { loose: true }],
],
presets: [
[
'@babel/preset-env', {
modules: false,
loose: true,
useBuiltIns: 'usage',
corejs: { version: 3, proposals: true },
targets,
debug,
},
],
],
},
},
]);
return {
options: {
cache: true,
entry: {
main: './<%= paths.src %>/js/_main.js',
},
output: {
filename: '[name].js',
chunkFilename: '[name].[chunkhash].js',
path: path.resolve('<%= paths.static %>/generated/'),
publicPath: '/static/generated/',
},
plugins,
resolve: {
mainFields: ['browser', 'main', 'module'],
symlinks: false,
},
performance: {
maxEntrypointSize: 500000,
maxAssetSize: 500000,
},
},
analyze: {
mode: 'production',
watch: true,
stats: {
maxModules: 99999,
},
optimization: {
concatenateModules: false,
},
output: {
path: path.resolve('<%= paths.tmp %>/js/'),
},
module: {
rules: getLoaderRulesConfig({ esmodules: true }, true),
},
plugins: [new BundleAnalyzerPlugin()],
},
dev: {
mode: 'development',
module: {
rules: getLoaderRulesConfig({ browsers: options.browserslist }, true),
},
},
devModern: {
mode: 'development',
devtool: 'source-map',
module: {
rules: getLoaderRulesConfig({ esmodules: true }),
},
output: {
filename: '[name].modern.js',
chunkFilename: '[name].modern.[chunkhash].js',
},
},
dist: {
mode: 'production',
module: {
rules: getLoaderRulesConfig({ browsers: options.browserslist }),
},
},
distModern: {
mode: 'production',
module: {
rules: getLoaderRulesConfig({ esmodules: true }),
},
output: {
filename: '[name].modern.js',
chunkFilename: '[name].modern.[chunkhash].js',
},
},
};
}());
};
我很想听听你的想法,我想我可能错过了什么!
解决方案
我的原因是,在 webpack 配置中,只检查 js 文件,例如test: /\.js$/
因为我在代码库中只有 js 文件。
我没有意识到一些 node_modules 是 .mjs 文件,并且被 babel 完全忽略了。
修复是test: /\.m?js$/
在 webpack 配置中使用以包含 .mjs 文件。
推荐阅读
- java - Spring Boot 更改覆盖异常响应
- python - matplotlib中的pcolormesh重新缩放轴
- r - 给定另一列的三个最小值,我需要找到一列中的值
- jenkins - 如何使用 CURL 将多级单选参数传递给詹金斯作业?
- python - 如何确定两个熊猫系列是否在给定的时间间隔内
- python - 如何将 dict 值添加到字段等于 dict 键的 mongodb 文档?
- javascript - 制作 100 多个计数器的最有效方法是什么?
- python - 为什么我的 PCA 对旋转和轴交换不是不变的?
- javascript - 我想在页面加载时自动从我的代码文件夹中获取一个文件到我的 js 文件
- python - 如何在 Selenium Python 中获取标签名称?