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

除了解决问题的 loganfsmyth 的回答之外，我想提醒任何其他阅读本文的初学者，我后来通过将 Babel 配置从 package.json 移到 .babelrc 来让自己的生活更轻松。

我还发现我需要的插件，例如我上面提到的插件babel-plugin-transform-es2015-arrow-functions，有更新版本的不同命名方案 - 例如@babel/plugin-transform-arrow-functions。旧版本的文档页面没有提到这一点。

我的webpack.config.js 的module 部分现在看起来像：

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

我的.babelrc 看起来像：

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "ie": "11"
                },
                "useBuiltIns": "entry"
            }
        ]
    ],
    "plugins": [
        "@babel/transform-async-to-generator",
        "@babel/transform-arrow-functions",
        "@babel/transform-modules-commonjs"
    ],
    "env": {
        "development": {},
        "test": {},
        "production": {}
    }
}

2021 年更新：As of Webpack version 5，默认输出 ES6 代码。如果您不希望发生这种情况，则需要添加配置设置。见Giorgio Tempesta's answer。

Answer 2

如果您使用的是 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,
  },
}

Answer 3

我遇到了同样的问题。结果发现并不是我的所有代码都有箭头函数，而只有一个库。我进入了我构建的包，并搜索了带有箭头函数的代码 (=>)。然后我在它周围搜索并复制了一些看起来很独特的名字，并设法在node_modules 的所有文件中找到它的来源。在我的例子中，带有箭头函数的代码来自名为 unfetch 的 fetch polyfill。我不确定为什么它没有被插件转译，但我将它切换到“whatwg-fetch”并且它工作得很好 - 捆绑中不再有箭头功能。您可以尝试使用相同的技术来发现您的情况是什么原因造成的。

Answer 4

Babel 本身是一个转换库，但它本身不会集成到任何特定的工具中。要将 Babel 与 Webpack 一起使用，您需要安装 babel-loader 包并在您的 Webpack 配置中使用类似于

的内容进行配置

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