关于webpack：JavaScript-babel-preset-env不会为IE11转换箭头功能


JavaScript - babel-preset-env not transpiling arrow functions for IE11

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

与在此问题中引用的控制台输出不同，在我的文档中没有提及"使用目标"或"使用预设"。我不知道这与使用npx webpack而不是npm run build有关。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
{
  // 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看起来像：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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文档以及非常笨拙的babel-plugin-transform-es2015-arrow-functions文档，我到达了这一点。这个非常相似的问题的答案(没有被接受的答案)根本没有提到该插件，有人建议使用polyfill，这似乎涉及在您的实际代码中而非当前阶段加载库？

我对使用Webpack刚起步很陌生，不了解"env"(在很多问题中都提到过)和"@babel/preset-env"之间的区别。或者说前者实际上暗示了什么；如果您在文档导航中单击" env"，它将带您进入@babel/preset-env页面。

我究竟做错了什么？

相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
      }
    }
  ]
}
相关讨论

除了解决问题的loganfsmyth的答案外，我想指出的是，对于任何其他初学者，我都将Babel配置从package.json移到了.babelrc，从而使自己的生活更轻松。

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
module: {
    rules: [
        {
            test: /\.m?js$/,
            exclude: /node_modules/,
            use: {
                loader:"babel-loader",
                options: {
                    presets: ["@babel/preset-env"],
                    plugins: [
                        require("@babel/plugin-transform-async-to-generator"),
                        require("@babel/plugin-transform-arrow-functions"),
                        require("@babel/plugin-transform-modules-commonjs")
                    ]
                }
            }
        }
    ]
}

我的.babelrc看起来像：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
   "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": {}
    }
}
相关讨论

我有同样的问题。原来并不是我所有的代码都具有箭头功能，而是只有一个库。我进入了内置的包，并使用箭头函数(=>)搜索代码。然后，我搜索并复制了一些看起来独特的名称，并设法找到了它的来源，并在node_modules中的所有文件中搜索了它。以我为例，带有箭头功能的代码来自名为unfetch的提取polyfill。我不确定为什么插件没有翻译它，但我将其切换为" whatwg-fetch"，并且效果很好-捆绑中不再包含箭头功能。您可以尝试使用相同的技术来发现导致这种情况的原因。