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

Question

我一直在尝试使用 Babel 和 shims/polyfills 使我的简单 HTML/JS 网站向后兼容（IE11 及以下版本），但无法正确完成。我当前的站点使用了一些较新的函数，例如 Promise()、fetch()、document.querySelectorAll().forEach() 和 () => {}.

我尝试在通过 Babel 从 es6 -> es5 转译我的代码的顶部添加 es6-shim, es5-shim, fetch-polyfill, and promise-polyfill、。无论如何，当我使用较旧的浏览器（例如 IE 11 或 10）加载我的网页时，我会收到多个错误。错误说 () => {} 不起作用，并且 .forEach() 不是函数，这没有意义，因为我使用的是垫片和 Babel。

这是我的 JS 的顺序包括：

[... 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 ..]

为了将我的 es6 代码转换为 es5，我执行了以下操作：

npm install -D babel-cli

npm install -D babel-preset-env

// .babelrc { "presets": ["env"] }

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

npm run build

两个示例错误："Object doesn't support property or method forEach" (querySelectorAll().forEach()) 和 "Syntax error" (() => {})

Answer 1

您使用的是旧版本的 Babel，切换到 Babel 7 并开始使用 @babel/preset-env。 NodeList.forEach 在任何 IE 中都不起作用，需要单独进行 polyfill，因为 Babel 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

How to Convert Javascript from ES6 to ES5 via Babel, Shim, and Polyfill

javascript

shim

ecmascript-5

ecmascript-6

babeljs