IE8中运行webpack打包后的程序会出现各种问题,请注意,真的会有各种问题,所以尽可能不要在IE8上运行webpack,连淘宝都不支持IE8了,为什么我们还要兼容它呢?毕竟是十年前的东西了。但是,如果产品经理非要兼容IE8,或者目标用户就是那些用IE8的群体(暴露年龄的东西),讲道理还是可以解决的,只是要多费些脑细胞。
首先要知道IE8 不怎么兼容es5特性,所以要加入es5的compatibility,常用的有:
<!--[if lt IE 9]>
<script type="text/javascript" src="/statics/vendor/es5-shim/es5-shim.min.js"></script>
<script type="text/javascript" src="/statics/vendor/es5-shim/es5-sham.min.js"></script>
<script type="text/javascript" src="/statics/vendor/respond/respond.min.js"></script>
<![endif]-->
上述中的respond.min.js是为了给bootstrap( http://getbootstrap.com )的栅格布局做兼容,谁让IE8不支持medaiquery呢。
仅仅如此还是不够的,万恶的IE8还不支持__proto__,所以还要写一些小小的兼容代码:
(function() {
var testObject = {};
if (!(Object.setPrototypeOf || testObject.__proto__)) {
var nativeGetPrototypeOf = Object.getPrototypeOf;
Object.getPrototypeOf = function(object) {
if (object.__proto__) {
return object.__proto__;
} else {
return nativeGetPrototypeOf.call(Object, object);
}
}
}
})();
终于可以让IE8兼容大部分的es5特性了,但是webpack引入的模块化还是可能导致很多问题,最主要的一个问题就是default。
//报错来自这里
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
这个问题就是export default 不被IE8支持,注意default是IE8是关键字不能用。网上有一些解决方案:
react 项目的一个ie8兼容性问题 http://www.aliued.com/?p=3240 引入es3ify-loader
使用transform-es2015-modules-simple-commonjs https://segmentfault.com/q/10...
babel-plugin-transform-es3-property-literals http://babeljs.io/docs/plugin...
...
当然还有很多其他的方案,但是要花耐心去尝试。其实最简单的方式不在代码中使用 export default
, 写代码的时候就要充分考虑这个问题。另外,在代码中不能使用default这个关键字,例如:
option['default'](data)
这样的代码在uglify之后就会还是会出现问题,一定不要用default
.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。