如何从 webpack 输出中删除箭头函数

Question

在运行我的代码通过 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: ['.*']
      }
    ])
  ]

这个问题在prod中也出现了，但是在dev中修复它应该告诉我如何在prod中修复它。

我不知道箭头函数可能来自其他任何地方，所以我希望在本质上获得适用于 ie11 的代码，但是箭头函数来自某个地方，所以它不起作用。

这不是我的代码，所以我不能 post 全部。不过，我可以 post 相关片段，但我不知道问题出在哪里，所以我还不知道相关内容。

Answer 1

你可以使用babel。由于箭头函数是 es6 自带的，所以可以用 babel 转成 es5。此 link 也可以帮助。

下面给出的 webpack 配置是我用于 babel 的。

module: {
   loaders: [
     {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
           babelrc: false,
           presets: ["@babel/preset-env", "@babel/preset-react","es2015"]
         }
     }
  ]
}

Answer 2

我遇到了同样的问题，找到了原因和解决方法。

原因

babel-loader 将 es6 及更高版本的语法转换为 es5。但是，由于转换是由 loader 完成的，转换仅在每个文件被捆绑之前发生。 loader 完成转换后，webpack 开始打包。然而，webpack 在打包文件时并不关心 babel-loader 的目标版本。它只是将文件与默认 ECMA 版本（可能是 es6 或更高版本）的语法捆绑在一起。这就是为什么捆绑的结果包括箭头函数等es6语法的原因。

第一步

文件 1 (es6)
file2 (es6)
file3 (es6)

装载机工作后

file1' (es5)
file2' (es5)
file3' (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 位于配置模式的根部，需要知道它是针对节点还是网络环境

参考文献：

https://webpack.js.org/configuration/target/

如何从 webpack 输出中删除箭头函数

How to remove arrow functions from webpack output

javascript

internet-explorer-11

webpack

babeljs

arrow-functions

原因

第一步

装载机工作后

webpack 打包文件后

解决方案