我一直在尝试通过使用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()
)
答案 0 :(得分:0)
您使用的是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 .:那时您可能不需要垫片。