react-cli開發項目兼容IE8

1、版本

react, react-dom   @0.14.3
redux @3.3.1
webpack @3.8.1

2、兼容性處理

1.保留字問題

default、class、catch是ES3中的保留字，不少庫中會有這樣的代碼 t.default = , 致使在IE8中報錯

error: 缺乏標識符

使用es3ify-loader來把這種語法轉換成t["default"] = 。要注意，通常腳手架中loader是忽略node_modules中的包的，因此須要配置loader的include以讓其轉換引入的庫，代碼大體以下：

// 例如，咱們使用了classnames 和 axios 這兩個庫
{
  test: /\.(js|jsx|mjs)$/,
  include: [/classnames/, /axios/], // 讓loader轉換這兩個在 node_modules中的包
  use: [
    require.resolve('es3ify-loader'),
    // 其餘loader
  ]
},

2.ES五、ES6……的api兼容問題

這個時候就須要es5-shim、es6-promise、console.polyfill等等,要放在入口文件最上方

3. webpack的UglifyJs插件代碼壓縮問題

配置代碼以下：

// cli自己還有其餘配置， 這裏只是須要本身手動添加的配置
new webpack.optimize.UglifyJsPlugin({
      compress: {
        properties:false,   //默認是true， 會把 foo["default"] 轉成 foo.default， 致使上面的錯誤
      },
      mangle: {
        screw_ie8: false,  //默認是true, 會把支持IE8的代碼clear掉
      },
      output: {
        beautify: true, // 控制webpack壓縮後代碼的格式化, false也能夠在ie8運行，並且沒了空格代碼體積小不少
        quote_keys: true,   //也是 foo["default"] 的問題
      }
    }),

4. Object.defineProperty 問題

使用CommonJS引入模塊，不要用ES6import方式

參考文章： 煦涵說Webpack-IE低版本兼容指南