现在很多人都在用webpack做打包。react+webpack或者vue+webpack都很火,但是不凡会遇到很多坑,这里我也遇到了,特别是在十万个cnm的IE上,我是哭了好久哟。
一、babel-polyfill 解决缺失API问题
即对一些ES6 API缺失的模拟。比如常见的Object.assign,Promise对象,fetch等等,这些可以通过统一引用“babel-polyfill”来解决,如果感觉“babel-polyfill”太重,也可以针对所需要的API自行引用对应的polyfill。polyfill的应用可以有两种方式:
- npm包的方式,在编译入口文件通过require(“babel-polyfill”)引入执行。
- 也可以在页面上,业务js前引入babel的script标签。
以及console对象的兼容问题就比较简单,也都可以通过对应polyfill解决,就不多做解释。
二、最麻烦的Object.defineProperty
在IE8中有自己实现的Object.defineProperty,它的行为和标准不同,且只能接受DOM对象,如果传入普通javascript对象会抛异常。
babel会把 export(非import) 编译成 Object.defineProperty的方式。相信添加这个问题的时候,babel确实存在这样的转换,具体的issues也有人提过 babel-export,而提供的解决方案—-引入es5-shim和es5-sham在这种情况下是也确实是可行的。不过目前的babel版本已经不会有这种转换(却还存另一个转换的坑),但是es5-shim和es5-sham的引用是必要的,因为它是解决通用性的es3环境下es5 API的缺失问题,就像babel-polyfill一样,Object.defineProperty是其中的一个API。
以上是现有常规的兼容方案,很多人使用也没有存在太多问题。
- ie8不支持设置访问器属性,即便是引了es5-shim;
- Babel 会把export xxx from ‘xx’ 语法转码为访问器属性设置的exports对象。
- 而react-router-react的index.js 偏偏用了export xxx from ‘xx’这样的语法。
解决办法
- 最直接的解决办法就是Babel修复这种转码方式,目前已经有人提过issue,但是尚未解决
- 其次,不要用export xx from ‘xx’的方式,如果在第三方包中有,你就找到他的源码,放到你自己的libs下边,改源码吧。