Question

我正在尝试在 es5 中使用 moduler bundler webpack 中的 babel 转换我的 es6 语法（导入和导出关键字、箭头函数）文件。我能够做到这一点，但在捆绑中我看到很少 arrow function 为什么？ babel 不能编译那些吗？

我喜欢这个

webpackconfig.js

 module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    },

.babelrc

{
    "presets": ["@babel/preset-env"],
    "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

package.json

"devDependencies": {
    "@babel/core": "^7.13.16",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/preset-env": "^7.13.15",
    "autoprefixer": "^10.2.5",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.2.2",
    "babel-preset-env": "^1.7.0",
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "compression-webpack-plugin": "^7.1.2",

但是我得到了从 arrow function 开始的包。 bundle.js

 (() => {
        "use strict";
        var t, e, a, n, u = (t = function () {
        enter code here
          ({
            init: function () {
                this.initComponents()
            }, initComponents: function () {
                Ut.init(), Pt.init()
            }
        }).init()
    })();

Answer 1

您看到的箭头函数是由 webpack 生成的，它根本不是来自 babel。基本上，webpack 允许您通过设置 target 来配置以完全支持 es5 语法。

这是一个例子：

// webpack.config.js
module.exports = {
   // ...
  target: ['web', 'es5'],
}

或者，如果您希望使用 browserslist，您可以简单地设置为 browserslist 并通过 package.json

提供配置

// webpack.config.js
module.exports = {
   // ...
  target: ['browserslist'],
}

并指定配置：

// package.json
{
  // ...
  "browserslist": [
    "IE 11"
  ]
}

为什么 babel 没有使用 webpack 将 es6 转换为 es5？

1 个答案: