[英]babel polyfill being included, but forEach still doesn't work in IE11 on NodeLists
I've got Webpack working with Babel and including the @babel/polyfill, yet IE11 is still throwing a SCRIPT438 error when trying to use .forEach
on a NodeList
. 我让Webpack与Babel一起工作并包括@ babel / polyfill,但是当尝试在NodeList
上使用.forEach
时,IE11仍然会抛出SCRIPT438错误。
Here's my package.json
这是我的package.json
{
...
"scripts": {
"build:js": "webpack --config ./_build/webpack.config.js"
},
...
"browserslist": [
"IE 11",
"last 3 versions",
"not IE < 11"
],
"babel": {
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage"
}
]
]
},
"devDependencies": {
"@babel/core": "^7.1.6",
"@babel/preset-env": "^7.1.6",
"babel-loader": "^8.0.4",
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2"
},
"dependencies": {
"@babel/polyfill": "^7.0.0"
}
}
My webpack.config.js
: 我的webpack.config.js
:
const path = require('path');
const webpack = require('webpack');
module.exports = (env, argv) => {
const javascript = {
test: /\.js$/,
use: {
loader: 'babel-loader'
}
};
// config object
const config = {
entry: {
main: './_src/js/main.js',
},
devtool: 'source-map',
output: {
path: path.resolve(__dirname, '../js'),
filename: '[name].js',
},
module: {
rules: [javascript]
}
}
return config;
}
And finally /_src/main.js
that I'm running through webpack and babel: 最后/_src/main.js
我通过的WebPack和巴贝尔运行:
const testList = document.querySelectorAll('.test-list li');
testList.forEach(item => {
console.log(item.innerHTML);
})
The docs at https://babeljs.io/docs/en/babel-polyfill say that you don't need to import
or require
polyfill
when loading it via Webpack with useBuiltIns: "usage"
. 在该文档https://babeljs.io/docs/en/babel-polyfill说,你不需要import
或require
polyfill
通过的WebPack与加载时,它useBuiltIns: "usage"
。 But even if I remove that option and manually import the whole polyfill at the top of main.js
(making my bundle huge), it still errors out in IE11. 但即使我删除了该选项并手动导入main.js
顶部的整个main.js
(使我的bundle变得庞大),它仍然在IE11中出错。
So...what am I doing wrong? 那么......我做错了什么?
Update: As of Babel 7.4.0, Babel has switched to using core-js
directly rather than wrapping it with @babel/polyfill
. 更新:截至Babel 7.4.0,Babel已经切换到直接使用core-js
而不是用@babel/polyfill
包装它。 core-js
already polyfills forEach
on NodeList
, so no additional polyfill required anymore. core-js
已经在NodeList
forEach
进行NodeList
,因此不再需要额外的polyfill。
babel-polyfill doesn't polyfill missing web API/prototype methods like NodeList.prototype.forEach
. babel-polyfill不会填充遗漏的Web API /原型方法,如NodeList.prototype.forEach
。
Also please note that your question title is misleading as NodeList.prototype.forEach
is not an ES6 feature. 另请注意,您的问题标题具有误导性,因为NodeList.prototype.forEach
不是ES6功能。 forEach
on iterable collections is currently only a candidate recommendation (as of August 2018). forEach
on iterable collections目前只是一个候选推荐 (截至2018年8月)。
Simply include your own polyfill at the top level of your Javascript: 只需在Javascript的顶层包含您自己的polyfill:
if (window.NodeList && !NodeList.prototype.forEach) {
NodeList.prototype.forEach = Array.prototype.forEach;
}
This might change as soon as core-js 3 is stable: https://github.com/zloirock/core-js/issues/329 一旦core-js 3稳定,这可能会改变: https : //github.com/zloirock/core-js/issues/329
You can also go without any polyfill if you start to adopt the common pattern being used in ES6 times: 如果您开始采用ES6中使用的通用模式,您也可以不使用任何polyfill:
const testList = [...document.querySelectorAll('.test-list li')];
or 要么
const testList = Array.from(document.querySelectorAll('.test-list li'));
The other option you have is to use for...of
instead: 您拥有的另一个选择是使用for...of
代替:
const lis = document.querySelectorAll('.test-list li');
for (const li of lis) {
// li.addEventListener(...) or whatever
}
Finally, you can also adopt the common ES5 pattern: 最后,您还可以采用常见的ES5模式:
var testList = document.querySelectorAll('.test-list li');
Array.prototype.forEach.call(testList, function(li) { /*whatever*/ });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.