包含babel polyfill，但forEach在NodeLists上的IE11中仍然不起作用 [英] babel polyfill being included, but forEach still doesn't work in IE11 on NodeLists

问题描述

我已经使Webpack与Babel一起使用，包括@ babel/polyfill，但是当尝试在NodeList上使用.forEach时，IE11仍会引发SCRIPT438错误.

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.

这是我的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:

And finally /_src/main.js that I'm running through webpack and babel:

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.但是，即使我删除了该选项并手动将整个polyfill导入到main.js的顶部(使捆绑软件变得很大)，在IE11中仍然会出错.

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". 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.

那么...我在做什么错了?

So...what am I doing wrong?

推荐答案

更新:从Babel 7.4.0开始，Babel改用直接使用core-js而不是用@babel/polyfill包装. core-js已经在NodeList上填充了forEach，因此不再需要其他填充.

Update: As of Babel 7.4.0, Babel has switched to using core-js directly rather than wrapping it with @babel/polyfill. core-js already polyfills forEach on NodeList, so no additional polyfill required anymore.

babel-polyfill不会缺少NodeList.prototype.forEach之类的web API/原型方法.

babel-polyfill doesn't polyfill missing web API/prototype methods like NodeList.prototype.forEach.

还请注意，您的问题标题具有误导性，因为NodeList.prototype.forEach不是ES6功能.截至2018年8月，forEach关于可迭代集合的当前只是候选推荐.

Also please note that your question title is misleading as NodeList.prototype.forEach is not an ES6 feature. forEach on iterable collections is currently only a candidate recommendation (as of August 2018).

只需在Javascript的顶层包含您自己的polyfill:

Simply include your own polyfill at the top level of your Javascript:

if (window.NodeList && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
}

Core-js 3稳定后，情况可能会发生变化: https://github .com/zloirock/core-js/issues/329

This might change as soon as core-js 3 is stable: https://github.com/zloirock/core-js/issues/329

如果您开始采用ES6时代使用的通用模式，那么您也可以不使用任何polyfill:

You can also go without any polyfill if you start to adopt the common pattern being used in ES6 times:

const testList = [...document.querySelectorAll('.test-list li')];

或

const testList = Array.from(document.querySelectorAll('.test-list li'));

您还有另一个选择是使用for...of:

The other option you have is to use for...of instead:

const lis = document.querySelectorAll('.test-list li');
for (const li of lis) {
  // li.addEventListener(...) or whatever
}

最后，您还可以采用通用的ES5模式:

Finally, you can also adopt the common ES5 pattern:

var testList = document.querySelectorAll('.test-list li');
Array.prototype.forEach.call(testList, function(li) { /*whatever*/ });

这篇关于包含babel polyfill，但forEach在NodeLists上的IE11中仍然不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！