Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.3k views
in Technique[技术] by (71.8m points)

javascript - How to remove arrow functions from webpack output

After running my code through webpack it contians arrow functions. I need the code to work in ie11 so I need to get rid of the arrow functions.

I'm using babel-loader for all .js files.

I wrote a loader to check code for arrow functions and ran it after the babel-loader and didn't get any arrow functions, so I know the output from babel is good.

I've also tried babel-polyfill and the babel plugin for transforming arrow funtions.

As I know the babel-loader outputs good code I suspect it might be a plugin, but I can't just disable them to test as that breaks the build.

Webpack plugins used in dev:

  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: ['.*']
      }
    ])
  ]

The problem also appears in prod as well, but fixing it in dev should tell me how to fix it in prod as well.

I don't know of anywhere else the arrow function could be coming from, so I expect to, in essence, get code that works on ie11, but there's arrow functions coming from somewhere so it doesn't work.

It's not my code, so I can't just post it all. I can, however, post relevant snippets, but I don't know where the problem is so I don't know what's relevant yet.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

I had the same problem and found the cause and solution.

Cause

babel-loader converts the grammar of es6 and higher to es5. However, because the conversion is done by the loader, the conversion occurs only in each file before it is bundled. After the loader completes the conversion, webpack starts to bundle. However, webpack does not care about target version of babel-loader when it bundles files. It just bundles file with grammar of it's default ECMA version(which could be es6 or later). It was the reason why bundled result includes es6 grammar such as arrow function.

Initial Step

  • file1 (es6)
  • file2 (es6)
  • file3 (es6)

After loader works

  • file1' (es5)
  • file2' (es5)
  • file3' (es5)

After webpack bundles files

  • bundled file (es6)

Solution

You can just simply add target: "es5" in webpack.config.js to handle this. After that, webpack bundles file in grammar of es5

// .babelrc
{
  "presets": ["@babel/preset-env"]
}
// webpack.config.js
module: {
   ...
   target: "es5", // include this!!
   loaders: [
     {
        test: /.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
     }
  ]
}

In webpack 5:

module.exports = {
    target: ['web', 'es5']
}

target is positioned at the root of the config schema and needs to know whether it targets a node or web environment

References:


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...