原因

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中，但是在开发人员中修复该问题应该告诉我如何在prod中进行修复。

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

这不是我的代码，所以我不能只发布所有代码。但是，我可以发布相关的摘要，但是我不知道问题出在哪里，所以我还不知道有什么相关。

Answer 1

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

原因

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

初始步骤

file1 (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',
     }
  ]
}

Answer 2

您可以使用babel。由于es6附带了箭头功能，因此您可以使用babel转换es5。另外，此链接可以帮助转到Webpack not converting ES6 to ES5。

在webpack的配置下面，我使用了babel。

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

如何从Webpack输出中删除箭头功能

2 个答案:

原因

初始步骤

加载器工作后

webpack 打包文件后

解决方案