我已经使用Webpack和Babel,并包含了@babel/polyfill,但在IE11上,当尝试对NodeList使用.forEach时,仍然会出现SCRIPT438错误。
这是我的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"
}
}
我的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;
}
最后,我通过webpack和babel运行/_src/main.js
:
const testList = document.querySelectorAll('.test-list li');
testList.forEach(item => {
console.log(item.innerHTML);
})
https://babeljs.io/docs/en/babel-polyfill 的文档说,使用 useBuiltIns: "usage"
在 Webpack 中加载它时不需要 import
或 require
polyfill
。但即使我删除该选项并在 main.js
的顶部手动导入整个 polyfill(使我的包变得巨大),它仍会在 IE11 中出错。那么......我做错了什么?