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

时间:2019-05-14 20:25:12

标签: javascript ecmascript-6 babeljs ecmascript-5 shim

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

我尝试添加es6-shimes5-shimfetch-polyfillpromise-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()

1 个答案:

答案 0 :(得分:0)

您使用的是Babel的旧版本,请切换至Babel 7,然后开始使用@babel/preset-envNodeList.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 .:那时您可能不需要垫片。