草庐IT

javascript - 包含了 babel polyfill,但是 forEach 在 IE11 的 NodeLists 上仍然不起作用

coder 2024-05-17 原文

我已经让 Webpack 与 Babel 一起工作并包括 @babel/polyfill,但是当尝试在 NodeList 上使用 .forEach 时,IE11 仍然抛出 SCRIPT438 错误.

这是我的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说你不需要 importrequire polyfill 通过 Webpack 使用 useBuiltIns: "usage"。但即使我删除该选项并在 main.js 顶部手动导入整个 polyfill(使我的包变得很大),它仍然会在 IE11 中出错。

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

最佳答案

更新:从 Babel 7.4.0 开始,Babel 已经切换到直接使用 core-js 而不是用 @babel/polyfill 包装它>。 core-js 已经对 NodeList 上的 forEach 进行了 polyfill,因此不再需要额外的 polyfill。


babel-polyfill 不会填充缺少的 Web API/原型(prototype)方法,例如 NodeList.prototype.forEach

另请注意,您的问题标题具有误导性,因为 NodeList.prototype.forEach 不是 ES6 功能。可迭代集合上的 forEach 目前只是一个候选推荐(截至 2018 年 8 月)。

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

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

一旦 core-js 3 稳定,这可能会改变:https://github.com/zloirock/core-js/issues/329

如果你开始采用 ES6 时代使用的通用模式,你也可以不使用任何 polyfill:

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*/ });

关于javascript - 包含了 babel polyfill,但是 forEach 在 IE11 的 NodeLists 上仍然不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53331180/

有关javascript - 包含了 babel polyfill,但是 forEach 在 IE11 的 NodeLists 上仍然不起作用的更多相关文章

  1. ruby - 检查 "command"的输出应该包含 NilClass 的意外崩溃 - 2

    为了将Cucumber用于命令行脚本,我按照提供的说明安装了arubagem。它在我的Gemfile中,我可以验证是否安装了正确的版本并且我已经包含了require'aruba/cucumber'在'features/env.rb'中为了确保它能正常工作,我写了以下场景:@announceScenario:Testingcucumber/arubaGivenablankslateThentheoutputfrom"ls-la"shouldcontain"drw"假设事情应该失败。它确实失败了,但失败的原因是错误的:@announceScenario:Testingcucumber/ar

  2. ruby - 检查字符串是否包含散列中的任何键并返回它包含的键的值 - 2

    我有一个包含多个键的散列和一个字符串,该字符串不包含散列中的任何键或包含一个键。h={"k1"=>"v1","k2"=>"v2","k3"=>"v3"}s="thisisanexamplestringthatmightoccurwithakeysomewhereinthestringk1(withspecialcharacterslike(^&*$#@!^&&*))"检查s是否包含h中的任何键的最佳方法是什么,如果包含,则返回它包含的键的值?例如,对于上面的h和s的例子,输出应该是v1。编辑:只有字符串是用户定义的。哈希将始终相同。 最佳答案

  3. ruby - 安装libv8(3.11.8.13)出错,Bundler无法继续 - 2

    运行bundleinstall后出现此错误:Gem::Package::FormatError:nometadatafoundin/Users/jeanosorio/.rvm/gems/ruby-1.9.3-p286/cache/libv8-3.11.8.13-x86_64-darwin-12.gemAnerroroccurredwhileinstallinglibv8(3.11.8.13),andBundlercannotcontinue.Makesurethat`geminstalllibv8-v'3.11.8.13'`succeedsbeforebundling.我试试gemin

  4. ruby-on-rails - 使用包含多个关联和单独的条件 - 2

    我的Gallery模型中有以下查询:media_items.includes(:photo,:video).rank(:position_in_gallery)我的图库模型有_许多媒体项,每个都有一个照片或视频关联。到目前为止,一切正常。它返回所有media_items包括它们的photo或video关联,由media_item的position_in_gallery属性排序。但是我现在需要将此查询返回的照片限制为仅具有is_processing属性的照片,即nil。是否可以进行相同的查询,但条件是返回的照片等同于:.where(photo:'photo.is_processingIS

  5. ruby - 我怎样才能只写一次 "Text"并同时检查 path_info 是否包含 'A' ? - 2

    -if!request.path_info.include?'A'%{:id=>'A'}"Text"-else"Text"“文本”写了两次。我怎样才能只写一次并同时检查path_info是否包含“A”? 最佳答案 有两种方法可以做到这一点。使用部分,或使用content_forblock:如果“文本”较长,或者是一个重要的子树,您可以将其提取到一个部分。这会使您的代码变干一点。在给出的示例中,这似乎有点矫枉过正。在这种情况下更好的方法是使用content_forblock,如下所示:-if!request.path_info.inc

  6. Ruby,使用包含 TK GUI 的 ocra 部署一个 exe - 2

    Ocra无法处理需要“tk”的应用程序require'tk'puts'nope'用奥克拉http://github.com/larsch/ocra不起作用(如链接中的一个问题所述)问题:https://github.com/larsch/ocra/issues/29(Ocra是1.9的"new"rubyscript2exe,本质上它用于将rb脚本部署为可执行文件)唯一的问题似乎是缺少tcl的DLL文件我不认为这是一个问题据我所知,问题是缺少tk的DLL文件如果它们是已知的,则可以在执行ocra时将它们包括在内有没有办法知道tk工作所需的DLL依赖项? 最佳答

  7. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法? - 2

    我遇到了一个非常奇怪的问题,我很难解决。在我看来,我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时,我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性,其中包括href和data-method。再次单击此链接后,我的服务器收到了对新href的请求,但使用的是旧的data-method,即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是,如果我刷新页面,HTML与"new"HTML相同(随返回的JS发生变化),但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  8. ruby - 允许主机名包含下划线的 URI.parse 的替代方法 - 2

    我正在使用DMOZ的listofurltopics,其中包含一些具有包含下划线的主机名的url。例如:608609TheOuterHeaven610InformationandimagegalleryofMcFarlane'sactionfiguresforTrigun,Akira,TenchiMuyoandotherJapaneseSci-Fianimations.611Top/Arts/Animation/Anime/Collectibles/Models_and_Figures/Action_Figures612虽然此url可以在网络浏览器中使用(或者至少在我的浏览器中可以使用:

  9. ruby - ri 有空文件 – Ubuntu 11.10, Ruby 1.9 - 2

    我正在运行Ubuntu11.10并像这样安装Ruby1.9:$sudoapt-getinstallruby1.9rubygems一切都运行良好,但ri似乎有空文档。ri告诉我文档是空的,我必须安装它们。我执行此操作是因为我读到它会有所帮助:$rdoc--all--ri现在,当我尝试打开任何文档时:$riArrayNothingknownaboutArray我搜索的其他所有内容都是一样的。 最佳答案 这个呢?apt-getinstallri1.8编辑或者试试这个:(非rvm)geminstallrdocrdoc-datardoc-da

  10. Ruby 计数数组对象,如果对象包含值 - 2

    我有一个数组:array=['Footballs','Baseball','football','Soccer']而且我需要计算看到Football或Baseball的次数,无论大小写和复数形式如何。这是我尝试做的,但没有成功:array.count{|x|x.downcase.include?'football'||x.downcase.include?'baseball'}编写这段代码的正确或更好的方法是什么?我正在寻找3作为答案。 最佳答案 我会将count与一个block结合使用,该block根据与您正在寻找的约束相匹配的正

随机推荐