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低版本兼容指南