关于既定技术栈的IE8浏览器兼容

Posted 2021-04-30 技术员成长史

IE8对当前我们使用的前端技术栈是不友好的，首先注意IE8不兼容CSS3的样式和ES6的语法，在要兼容IE8的项目开发时就选用比较原始的技术栈，如：html+bootstrap3+jquery1.9(或是1.11)以及一些现成的jquery组件来构建前端。目前，我觉得有两种比较好用的而且也都尝试过的方案。

两种方案的相同之处是都使用模块化开发的方式，我们使用的打包工具是webpack，我觉得使用webpack最好使用近期版本比较新的，还有为兼容IE8关闭webpack的热更新（*hot和inline均定义为false），为部署方便webpack可以写多份配置，针对output的publicPath是为了动态适应部署环境的资源位置，一般设置为‘/’；

方案一：

es5-shim@4.5.10+es3ify-loader@0.2.0+babel配置

es5-shim完美模拟了所有 ES5 中可以被完美模拟的方法；es5-sham尽力模拟了所有 ES5 中可以不可以被完美模拟的方法（尽量不要使用）；

es3ify-loader将es5，es6的语法转化为es3的，如：defineProperty,或是一些不支持标识符的处理，如： ‘default’;

babel的作用同样是把es6转化为es5语法，在现有环境执行，需要配置.babelrc文件；

方案二：

babel-polyfill + babel + es3ify-loader@0.2.0

babel-polyfill是为了弥补babel不转换新的api的情况，实现新的对象方法，可以进行部分引用；

最后正确配置webpack的uglify,使用uglifyjs-webpack-plugin@1.1.1，合理配置，对于webpack4以上的版本，想要手动配置，请查看文档https://webpack.js.org/concepts/mode/