“只允许babel-polyfill的一个实例”错误

Question

我需要帮助来诊断和修复这个错误：

"Error: only one instance of babel-polyfill is allowed"

我的package.json中有以下内容：

"devDependencies": {
    "babel-core": "^6.23.1",
    "babel-jest": "^19.0.0",
    "babel-loader": "^6.3.2",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.23.0" ...

"dependencies": {
    "babel-polyfill": "^6.23.0" ...

还有我的webpack配置中的这一行和这一行：

entry: ["babel-polyfill", path.resolve(APP_PATH, 'index')],
...
module: {
 rules: [
  {
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    query: {
      // specify that we will be dealing with React code
      presets: ['react', 'es2015']
    }
  }
]}

Answer 1

如果罪魁祸首是HtmlWebpackPlugin，则需要在实例化插件时添加选项inject: false。没有此选项的某些配置会导致构建的javascript代码加载两次。

Answer 2

可以多次导入幂等的Babel多边形填充

从NPM安装

npm install --save idempotent-babel-polyfill

然后导入它

import 'idempotent-babel-polyfill';

Answer 3

在使用CommonsChunkPlugin或HtmlWebpackPlugin时，如果包装文件的顺序不正确，则通常会出现Only one instance of babel-polyfill is allowed。

对于HtmlWebpackPlugin，您可以使用chunksSortMode手动对文件进行排序

使用"webpack": "^1.14.0"

new HtmlWebpackPlugin({
  ...
  chunksSortMode: 'dependency',
  ...
}),

来源：gdi2290 @ GitHub - 1 Jul. 2016 / 22 Jan. 2018