Webpack 使用Babel为IE11传输ES6

我是babel的新手，正在尝试将我的es6代码传输到IE11。但是当我在IE11中运行代码时，我得到了关于我的

forEach

代码的js错误。根据我所读的内容，我需要添加预设

@babel/preset env

。我把它添加到我的配置文件中，所以我不确定它为什么不传输那些

forEach

调用

const path = require('path');

module.exports = {
    entry: {
        setupForm: "./Scripts/es6/setupForm.js",
        prelimForm: "./Scripts/es6/prelimForm.js"
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, './Scripts/build'),
    },
    module: {
        rules: [{
            loader: 'babel-loader',
            test: /\.js$/,
            exclude: /node_modules/,
            query: {
                presets: ['@babel/preset-env']
            }
        }]
    }
}

我想也许我需要额外引用babel

polyfill.js

，因为我把它添加到了我的页面中，但是，我得到了同样的错误，关于对象不支持属性或方法“forEach”

这是我的package.json文件

{
  "name": "OurSite",
  "version": "1.0.0",
  "description": "",
  "main": "map_embed.js",
  "directories": {
    "doc": "docs"
  },
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "webpack": "^4.32.2",
    "webpack-cli": "^3.3.2"
  },
  "babel": {
    "presets": [
      "env"
    ]
  },
  "dependencies": {}
}

---

以下是您应该做的：

• 安装

  @babel/polyfill

• 在您的

  条目中包含
  @babel/polyfill
  （如果您有多个条目，并且您不打算在同一页面上同时包含这两个条目，请将polyfill同时包含在这两个条目中）

• 确保所有babel软件包都具有相同的主要版本，即

  7.x.x

  （不要担心

  babel loader

  ——这实际上是一个网页包，而不是babel软件包）

网页包

module.exports = {
    ...
    entry: {
        setupForm: ["@babel/polyfill", "./Scripts/es6/setupForm.js"],
        prelimForm: ["@babel/polyfill", "./Scripts/es6/prelimForm.js"]
    },
    ...
}

package.json

{
  ...
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "@babel/polyfill": "^7.4.4",
    "babel-loader": "^8.0.6",
    "webpack": "^4.32.2",
    "webpack-cli": "^3.3.2"
  },
  ...
}

---

自Babel 7.4.0起，

@Babel/polyfill

已被弃用，取而代之的是

核心js

和

再生器

软件包

包括在网页包中

module.exports={
条目：{
主要内容：[
“core js/stable”，
“再生器运行时/运行时”，
“src/main.js”
]
}
}

或者在js的顶部包含

导入'core js/stable'；
导入“再生器运行时/运行时”；

您是否尝试将

条目：[“@babel/polyfill”、“/Scripts/es6/setupForm.js”]、

添加到您的网页条目配置中？否。因为我的条目中有两个文件，我如何将您的内容转换到每个文件？这取决于两个输出是否在同一页面上。如果它们位于不同的页面上，则需要在以下两个页面上添加polyfill:

条目：{setupForm:['@babel/polyfill'，'./Scripts/es6/setupForm.js']}

etcNo否则它们将不在同一页面上。我试着这样做-setupForm:[“@babel polyfill”，“/Scripts/es6/setupForm.js”]-第一次。但在运行npm运行构建时，我收到一个错误“未找到模块：错误：无法解析'babel polyfill'”。我是否需要将@符号替换为./node_模块？不，您需要保留

@

，您确定已将

@babel/polyfill

作为一个包安装吗，我的一部分问题是我在节点列表而不是数组上使用forEach。这有助于解决该问题-另请参见关于从polyfill迁移到此的内容。