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.