Включено многофакторное заполнение babel, но forEach все еще не работает в IE11 на NodeLists - PullRequest
Новая
       20

Включено многофакторное заполнение babel, но forEach все еще не работает в IE11 на NodeLists

0 голосов
/ 16 ноября 2018

У меня есть Webpack, работающий с Babel и включающий @ babel / polyfill, но 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, что я запускаю через веб-пакет и babel: 

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

testList.forEach(item => {
  console.log(item.innerHTML);
})

Документыв https://babeljs.io/docs/en/babel-polyfill говорите, что вам не нужно import или require polyfill при загрузке через Webpack с useBuiltIns: "usage".Но даже если я уберу эту опцию и вручную импортирую весь полифилл в верхней части main.js (что делает мой пакет огромным), в IE11 все равно произойдет ошибка.

Итак ... что я делаю неправильно?

1 Ответ

0 голосов
/ 16 ноября 2018

babel-polyfill не заполняет отсутствующие методы веб-API / прототипа, такие как NodeList.prototype.forEach.

Также обратите внимание, что заголовок вашего вопроса вводит в заблуждение, поскольку NodeList.prototype.forEach не является функцией ES6.forEach для повторяющихся коллекций в настоящее время является рекомендацией кандидата (по состоянию на август 2018 года).

Просто добавьте свой собственный полизаполнение на верхний уровень вашего 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*/ });
...