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