react-cli开发项目兼容IE8

一、版本

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

二、兼容性处理

1.保留字问题

defaultclasscatch是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-shimes6-promiseconsole.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低版本兼容指南

    原文作者:LiZ2z
    原文地址: https://segmentfault.com/a/1190000015249965
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞