babel-polyfill 如何在IE8,9,10上正确运行?

发布于 2022-09-04 01:27:29 字数 2037 浏览 10 评论 0

目前配置是webpack + es6 + babel的配置
参考了以下文章:
使用 ES6 的浏览器兼容性问题
https://segmentfault.com/a/11...
ES6 + Webpack + React + Babel 如何在低版本浏览器上愉快的玩耍(上)
https://segmentfault.com/a/11...
ES6 + Webpack + React + Babel 如何在低版本浏览器上愉快的玩耍(下)
https://segmentfault.com/a/11...

代码中使用了Promise 对象,通过以上文章尝试各种方法,包含以下:
1、在入口文件中引用 import 'babel-polyfill' 或 require('babel-polyfill')
在Chrome 49上可以正常运行,但在IE8,9,10 上均出现SCRIPT5022: 引发了异常但未捕获
图片描述

图片描述

后面实验把上图中红框内的throw TypeError去掉后,可以正常在IE9,10运行,但IE8直接崩溃

2、使用插件babel-plugin-transform-runtime 后,在Chrome49 和IE9,10上 都无法运行,都出现以下错误
图片描述
图片描述

其中IE8比较奇怪,没有出现以上错误,报了另外一个错误:SCRIPT1028: 缺少标识符、字符串或数字,如下
图片描述

package.json如下:

"devDependencies": {

"babel-core": "^6.14.0",
"babel-loader": "^6.2.5",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.14.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-1": "^6.13.0",
"json-loader": "^0.5.4",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.1"

},
"dependencies": {

"babel-polyfill": "^6.13.0",
"babel-runtime": "^6.11.6"

}

最后想知道如何在IE8,9,10上使用ES6的特性兼容方案,比如Promise、Set、Map等

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(6

不打扰别人 2022-09-11 01:27:29

试试在入口处这样写

entry: {
  app: ['babel-polyfill', './src/scripts/index.js'],
}

数组第二项替换为你的入口文件。

琴流音 2022-09-11 01:27:29

要兼容低版本IE能不能不搞这种幺蛾子啊……

似最初 2022-09-11 01:27:29

IE8 这个错误的原因是 default 是 JavaScript 关键字,而低版本 IE 不允许关键字作对象的 key. 改成

({ "default": obj })

就没这个问题了。

空城旧梦 2022-09-11 01:27:29

es5 shim/sham 加了吗?加上以后再用 es2015 loose 模式加 transform-runtime 应该就可以在 IE89 下玩了。当然有些写法如楼上说的 default 是需要注意的。

悲念泪 2022-09-11 01:27:29

我刚刚提交的教程,亲测哦~https://github.com/brickspert...

完全可以解决您的问题~采纳我 ~~

夜雨飘雪 2022-09-11 01:27:29

可以参考下这个: Webpack-IE低版本兼容指南

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文