[英]Transpiling ES6 for IE11 with Babel
I'm new to babel and trying to transpile my es6 code to work with IE11.我是 babel 的新手,并试图将我的 es6 代码转换为与 IE11 一起使用。 But when I run the code in IE11 I get js errors about my
forEach
code.但是当我在 IE11 中运行代码时,我收到有关
forEach
代码的 js 错误。 From what I've read I needed to add the preset @babel/preset-env
.从我读过的内容来看,我需要添加预设
@babel/preset-env
。 I added that to my config file so I'm not sure why it's not transpiling those forEach
calls.我将它添加到我的配置文件中,所以我不确定为什么它不转译那些
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']
}
}]
}
}
I thought that perhaps I needed to additionally reference the babel polyfill.js
as discussed here so I added it to my page, however, I'm getting the same error about Object doesn't support property or method 'forEach' .我想也许我需要额外引用这里讨论的 babel
polyfill.js
,所以我将它添加到我的页面,但是,我收到了关于Object does not support property or method 'forEach'的相同错误。
Here is my package.json file.这是我的 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": {}
}
As of Babel 7.4.0 @babel/polyfill
has been deprecated in favour of core-js
and regenerator
packages.从 Babel 7.4.0 开始,
@babel/polyfill
已被弃用,取而代之的是core-js
和regenerator
包。
https://babeljs.io/docs/en/babel-polyfill#docsNav https://babeljs.io/docs/en/babel-polyfill#docsNav
Either include in webpack要么包含在 webpack 中
module.exports = {
entry: {
main: [
'core-js/stable',
'regenerator-runtime/runtime',
'src/main.js'
]
}
}
OR include in your js at the top或包含在您的 js 顶部
import 'core-js/stable';
import 'regenerator-runtime/runtime';
Here's what you should do:这是你应该做的:
@babel/polyfill
@babel/polyfill
@babel/polyfill
in your entry
(If you have more than 1 entry, and you don't plan to have both on the same page, include the polyfill in both)entry
包含@babel/polyfill
(如果您有 1 个以上的条目,并且您不打算在同一页面上同时包含这两个条目,请在两个条目中都包含 polyfill)7.xx
(don't worry about babel-loader
- that's actually a webpack package, not a babel package).7.xx
(不要担心babel-loader
- 这实际上是一个 webpack 包,而不是 babel 包)。 Webpack网络包
module.exports = {
...
entry: {
setupForm: ["@babel/polyfill", "./Scripts/es6/setupForm.js"],
prelimForm: ["@babel/polyfill", "./Scripts/es6/prelimForm.js"]
},
...
}
package.json包.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"
},
...
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.