Webpack构建兼容IE8

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是关键字不能用。网上有一些解决方案：

1. react 项目的一个ie8兼容性问题 http://www.aliued.com/?p=3240 引入es3ify-loader

2. 使用transform-es2015-modules-simple-commonjs https://segmentfault.com/q/10...

3. babel-plugin-transform-es3-property-literals http://babeljs.io/docs/plugin...

4. ...

固然还有不少其余的方案，可是要花耐心去尝试。其实最简单的方式不在代码中使用 export default， 写代码的时候就要充分考虑这个问题。另外，在代码中不能使用default这个关键字，例如:

option['default'](data)

这样的代码在uglify以后就会仍是会出现问题，必定不要用default.