JavaScript - babel-preset-env 不为 IE11 转换箭头函数

Question

我很难尝试配置 Babel 来转换 IE11 可以理解的代码，特别是箭头函数。使用我的配置运行 npx webpack --mode=development 不会转换我代码中的箭头函数:在生成代码的 eval() 语句中，我可以看到所有实例都未转换。

不同于 this question 中引用的控制台输出，我没有提到“使用目标”或“使用预设”。我不知道这是否与使用 npx webpack 而不是 npm run build 有关。

这是我的 package.json 的 Babel 部分:

{
  // name, version etc. snipped
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/plugin-transform-async-to-generator": "^7.1.0",
    "@babel/plugin-transform-es2015-arrow-functions": "^6.22.0",
    "@babel/plugin-transform-es2015-modules-commonjs": "^6.26.2",
    "@babel/preset-env": "^7.1.0",
    "ajv": "^6.5.4",
    "copy-webpack-plugin": "^4.5.2",
    "eslint-plugin-jest": "^21.24.1",
    "jest": "^23.6.0",
    "jest-dom": "^2.0.4",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2"
  },
  "babel": {
    "presets": [
      [
        "@babel/preset-env",
        {
          "targets": {
            "ie": "11"
          }
        }
      ]
    ],
    "env": {
      "development": {
        "plugins": [
          "transform-es2015-arrow-functions",
          "transform-es2015-modules-commonjs"
        ]
      },
      "test": {
        "plugins": [
          "transform-es2015-arrow-functions",
          "transform-es2015-modules-commonjs"
        ]
      }
    }
  }
}

我的 webpack.config.js 看起来像:

const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path");

module.exports = {
    entry: "./src/thing.js",
    optimization: {
        minimize: false
    },
    output: {
        filename: "thing.js",
        path: path.resolve(__dirname, "dist")
    },
    plugins: [
        new CopyWebpackPlugin([
            // snipped
        ])
    ]
};

我是通过阅读此处有关 Babel 配置的其他问题和 babel-preset-env docs 得出这一点的还有非常吝啬的babel-plugin-transform-es2015-arrow-functions docs . this very similar question的答案(没有接受的答案)根本不要提到那个插件，有人建议使用 polyfill，这似乎涉及在您的实际代码中而不是在这个阶段加载一个库？

一般来说，我对使用 Webpack 还很陌生，不明白 "env"(在很多问题中都会提到)和 "@ 之间有什么区别babel/preset-env”。或者实际上前者一般意味着什么；如果您在文档导航中单击“env”，它会将您带到 @babel/preset-env 的页面。

我做错了什么？

Answer 1

如果您使用的是 Webpack 5，则需要在 ouput.environment 配置中指定要转换的功能，如下所述:https://webpack.js.org/configuration/output/#outputenvironment .

output: {
  // ... other configs
  environment: {
    arrowFunction: false,
    bigIntLiteral: false,
    const: false,
    destructuring: false,
    dynamicImport: false,
    forOf: false,
    module: false,
  },
}

编辑 22 年 8 月 10 日

在对我的 webpack 配置进行一些重构时，我发现箭头已停止转译(或者我在给出原始答案时可能没有进行广泛的测试)。

有两件事没有正确设置:target 键丢失，babel 配置有一个错误的值。

为了支持旧版浏览器，目标键需要这样设置:

target: ['web', 'es5']

在 Babel 配置中，我在 Babel 加载器的 targets 下的 browserslist 配置中添加了 'not dead'，所以由于 IE11 现在技术上已经死了，这配置删除了箭头函数的翻译。

因此，如果您仍然需要转译箭头函数，这将是 Babel 配置中的相关部分。

module: {
  rules: [
    {
      test: /\.m?js$/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: [
            [
              '@babel/preset-env',
              {
                useBuiltIns: 'entry',
                targets: {
                  // be sure not to add 'not dead' here 
                  browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']
                },
                corejs: {
                  version: 3,
                  proposals: false,
                },
              },
            ],
          ],
          plugins: [['@babel/plugin-transform-runtime', { corejs: 3 }]],
        },
      },
    },
  ],
},