react-cli开发项目兼容IE8

一、版本

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

二、兼容性处理

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