私はバベル/ポリフィル@バベルでの作業とを含むWebPACKを持って、まだ使用しようとするとIE11はまだSCRIPT438エラーを投げている.forEach上NodeList。
これが私の 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"
}
}
私の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;
}
そして最後に/_src/main.js、私はwebpackとbabelを実行しています。
const testList = document.querySelectorAll('.test-list li');
testList.forEach(item => {
console.log(item.innerHTML);
})
https://babeljs.io/docs/en/babel-polyfillのドキュメントには、Webpackを介してロードする必要がない、importまたはrequire polyfillロードする場合は、が必要であると記載されていuseBuiltIns: "usage"ます。ただし、そのオプションを削除して、上部にあるポリフィル全体を手動でインポートしてもmain.js（バンドルが巨大になります）、IE11ではエラーが発生します。
だから...私は何が間違っているのですか？
更新： Babel 7.4.0以降、Babelはでcore-jsラップするのではなく直接使用するように切り替えました@babel/polyfill。core-jsすでにポリフィルがforEachオンNodeListになっているため、追加のポリフィルは必要ありません。
babel-polyfillは、のような欠落しているWeb API /プロトタイプメソッドをポリフィルしませんNodeList.prototype.forEach。
またNodeList.prototype.forEach、ES6の機能ではないため、質問のタイトルは誤解を招く可能性があることに注意してください。forEach反復可能なコレクションについては、現在、推奨候補にすぎません（2018年8月現在）。
Javascriptのトップレベルに独自のポリフィルを含めるだけです。
if (window.NodeList && !NodeList.prototype.forEach) {
NodeList.prototype.forEach = Array.prototype.forEach;
}
これは、core-js 3が安定するとすぐに変更される可能性があります：https：//github.com/zloirock/core-js/issues/329
ES6で使用されている一般的なパターンを採用し始めた場合は、ポリフィルなしで実行することもできます。
const testList = [...document.querySelectorAll('.test-list li')];
または
const testList = Array.from(document.querySelectorAll('.test-list li'));
あなたが持っている他のオプションはfor...of代わりに使用することです：
const lis = document.querySelectorAll('.test-list li');
for (const li of lis) {
// li.addEventListener(...) or whatever
}
最後に、一般的なES5パターンを採用することもできます。
var testList = document.querySelectorAll('.test-list li');
Array.prototype.forEach.call(testList, function(li) { /*whatever*/ });
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加