通过 webpack 运行我的代码后，它包含箭头函数。我需要代码在 ie11 中工作，所以我需要去掉箭头函数。
我正在为所有 .js 文件使用 babel-loader。
我写了一个加载器来检查箭头函数的代码，并在 babel-loader 之后运行它，但没有得到任何箭头函数，所以我知道 babel 的输出是好的。
我还尝试了 babel-polyfill 和用于转换箭头函数的 babel 插件。
据我所知，babel-loader 会输出良好的代码，我怀疑它可能是一个插件，但我不能仅仅禁用它们进行测试，因为那样会破坏构建。
开发中使用的Webpack插件:
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}
])
]
问题也出现在生产中，但在开发中修复它应该告诉我如何在生产中修复它。
我不知道箭头函数可能来自其他任何地方，所以我希望在本质上获得适用于 ie11 的代码，但是箭头函数来自某个地方，所以它不起作用。
这不是我的代码，所以我不能把它全部贴出来。不过，我可以发布相关片段，但我不知道问题出在哪里，所以我还不知道什么是相关的。
最佳答案
我遇到了同样的问题，找到了原因和解决方案。
原因
babel-loader 将 es6 及更高版本的语法转换为 es5。但是，因为转换是由加载器 完成的，所以转换只发生在每个文件被捆绑之前。 loader 完成转换后，webpack 开始打包。然而，webpack 在打包文件时并不关心 babel-loader 的目标版本。它只是将文件与默认 ECMA 版本(可能是 es6 或更高版本)的语法捆绑在一起。这就是为什么捆绑结果中包含箭头函数等es6语法的原因。
初始步骤
- 文件 1 (es6)
- 文件 2 (es6)
- 文件 3 (es6)
加载器工作后
- 文件 1' (es5)
- 文件 2' (es5)
- 文件 3' (es5)
webpack 打包文件后
- 捆绑文件(es6)
解决方案
您只需在 webpack.config.js 中添加 target: "es5" 即可处理此问题。之后webpack以es5语法打包文件
// .babelrc
{
"presets": ["@babel/preset-env"]
}
// webpack.config.js
module: {
...
target: "es5", // include this!!
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
}
]
}
在 webpack 5 中:
module.exports = {
target: ['web', 'es5']
}
target 位于配置模式的根部，需要知道它是针对节点还是网络环境
引用资料:
关于javascript - 如何从 webpack 输出中删除箭头函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54039337/