Question

我一直在尝试通过使用Babel和shims / polyfills使我的简单HTML / JS网站向后兼容（IE11及以下版本），但无法正确实现。我当前的站点使用一些较新的功能，例如a，Promise()，fetch()和document.querySelectorAll().forEach()。

我尝试添加es6-shim，es5-shim，fetch-polyfill和promise-polyfill，最重要的是从es6-> es5编译代码通过通天塔。无论如何，当我使用旧版浏览器（例如IE 11或10）加载网页时，都会遇到多个错误。这些错误表明() => {}不起作用，并且() => {}不是一个函数，由于我使用的是垫片和Babel，因此没有意义。

这是我的JS包括的顺序：

.forEach()

然后将我的es6代码移植到es5中，我执行了以下操作：

[... body content ...] <script src="assets/libs/es5-shim/es5-shim.min.js" type="text/javascript"></script> <script src="assets/libs/es6-shim/es6-shim.min.js" type="text/javascript"></script> <script src="assets/libs/promise-polyfill/promise-polyfill.min.js" type="text/javascript"></script> <script src="assets/libs/fetch-polyfill/fetch.umd.js" type="text/javascript"></script> [... rest of scripts ..]

npm install -D babel-cli

npm install -D babel-preset-env

// .babelrc

{
  "presets": ["env"]
}

// package.json ... "scripts": { "build": "babel src -d build", }, ...

两个示例错误：“对象不支持forEach的属性或方法”（npm run build）和“语法错误”（querySelectorAll().forEach()）

Answer 1

您使用的是Babel的旧版本，请切换至Babel 7，然后开始使用@babel/preset-env。 NodeList.forEach在任何IE中均不起作用，并且需要单独进行Polyfill，因为Babel polyfill不会对任何缺少的原型方法进行polyfill。

最短的polyfill可能是

if (!NodeList.prototype.forEach) NodeList.prototype.forEach = Array.prototype.forEach;

此外，您还需要配置.babelrc，以便将代码转换为IE。 Babel 7示例：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": ["ie >= 10", "last 1 version"]
        }
      }
    ]
  ]
}

P.S .：那时您可能不需要垫片。

如何通过Babel，Shim和Polyfill将Javascript从ES6转换为ES5

1 个答案: