Webpack-IE低版本兼容指南

来源：https://github.com/zuojj/fedlab/issues/5

Webpack，Webpack 是一个前端资源加载/打包工具，如今版本已经 release 到 v2.6.1，今天的文章不直接介绍Webpack的API及使用，而是对最近项目开发中使用Webpack打包时处理IE低版本(IE8及如下)浏览器兼容问题作一次总结。

PC端项目前端基础技术选型jQuery + ES6 + EJS + Babel + Webpack：

• jQuery：提供选择器和ajax接口兼容支持；
• ES6：跟进前端趋势，方便向后兼容；
• EJS：提供前端模板引擎支持；
• Babel：提供 ES6 转码支持；
• Webpack: 提升前端资源加载/打包；

项目开发过程都在 Chrome 浏览器中，一切都OK，没有任何问题，当在IE9如下浏览器中调试发现好多坑，现总结以下，之后新手参考。

Case One: default 、 class、catch ES3中保留字问题

报错信息：

SCRIPT1048: 缺乏标识符

对应代码：

e.n = function (t) { var n = t && t.__esModule ? function () { return t.default } : function () { return t }; return e.d(n, "a", n), n }

网上查找资料，webpack有一款loader插件es3ify-loader来处理ES3的兼容问题，修改webpack配置，问题解决，添加规则以下：

module: {
    rules: [{ test: /.js$/, enforce: 'post', // post-loader处理 loader: 'es3ify-loader' } ] }

这个loader是干啥用的捏，就是把这些保留字给你加上引号，使用字符串的形式引用，请看实例：

// 编译前 function(t) { return t.default; } // 编译后 function(t) { return t["default"]; }

Case Two: uglify-js产生问题

从新构建，在IE低版本浏览器预览，使用 webpack.optimize.UglifyJsPlugin 压缩时，又报上面一样的错误了，从新采用 beauty:true, build 发现引号被压缩掉了，究其缘由，研究了下uglify-js默认配置，发现了 compress.properties 属性，增长build options以下，问题解决：

new webpack.optimize.UglifyJsPlugin({ compress: { properties: false, warnings: false }, output: { beautify: true }, sourceMap: false })

Case Three: uglify-js问题

从新构建，在IE低版本浏览器预览，使用 webpack.optimize.UglifyJsPlugin 压缩时，又报上面一样的错误了，报错代码：

{
    catch: function (t) { return this.then(null, t) } }

继续查找uglify-js配置，发现 output.quote_keys，修改build options，问题解决：

new webpack.optimize.UglifyJsPlugin({ compress: { properties: false, warnings: false }, output: { beautify: true, quote_keys: true }, sourceMap: false }),

编译后：

{
    "catch": function(t) { return this.then(null, t); } }

Case Four: uglify-js问题

从新构建，在IE低版本浏览器预览，报错信息以下：

SCRIPT3126: 没法设置未定义或 null 引用的属性

继续分析压缩后代码，发现仍是uglify-js问题，其mangle 配置属性 mangle.screw_ie8 默认为 true， 什么意思捏，意思就是把支持IE8的代码clear掉，screw you => 去你的，修改压缩配置项，从新编译，问题解决：

new webpack.optimize.UglifyJsPlugin({ compress: { properties: false, warnings: false }, output: { beautify: true, quote_keys: true }, mangle: { screw_ie8: false }, sourceMap: false })

Case Five: ES5的API兼容报错

在 webpack 的 entry 入口文件top引入 es5-shim 问题解决

require('es5-shim'); require('es5-shim/es5-sham');

Case Six: Console.log 问题

在 webpack 的 entry 入口文件top引入 console-polyfill 问题解决

require('console-polyfill');

Case Seven: Promise 兼容

在 webpack 的 entry 入口文件top引入 es6-promise 问题解决

require('es6-promise');

Case Eight: Object.defineProperty 问题

这个case 应该说是最难搞的一个case了，耗时也比较长，关键点在于使用 es5-shim/es5-sham也有问题，查看你官网发如今低版本浏览器也会有问题，官网描述以下：

 Object.defineProperty
In the worst of circumstances, IE 8 provides a version of this method that only works on DOM objects. This sham will not be installed. The given version of defineProperty will throw an exception if used on non-DOM objects.
In slightly better circumstances, this method will silently fail to set "writable", "enumerable", and "configurable" properties.
Providing a getter or setter with "get" or "set" on a descriptor will silently fail on engines that lack "defineGetter" and "defineSetter", which include all versions of IE.
https://github.com/es-shims/es5-shim/issues#issue/5

那这个Object.defineProperty 是如何产生的呢，这个是babel编译后产生的，当咱们在代码使用 importexport ES6 Module时出现的，那你可能最直接的想法就是我不用ES6 Module了，改用Commonjs规范，OK，修改后编译，确实解决了问题，可是查看代码里仍是有一段代码的，以下：

e.d = function(t, n, r) { e.o(t, n) || Object.defineProperty(t, n, { "configurable": !1, "enumerable": !0, "get": r }); }, e.n = function(t) { var n = t && t.__esModule ? function() { return t["default"]; } : function() { return t; }; return e.d(n, "a", n), n; }, e.o = function(t, e) { return Object.prototype.hasOwnProperty.call(t, e); }

看代码已经作了容错判断。

Case Nine: Object.defineProperty 问题

从新构建，加入 json3 处理 JSON 对象兼容时，代码在此处抛出了异常：

var hasGetter = 'get' in descriptor; var hasSetter = 'set' in descriptor; if (!supportsAccessors && (hasGetter || hasSetter)) { throw new TypeError(ERR_ACCESSORS_NOT_SUPPORTED); }

分析supportsAccessors代码逻辑：

var supportsAccessors = owns(prototypeOfObject, '__defineGetter__');

经过断点调试，supportsAccessors值为false且hasGetter或者hasSetter时抛出了异常，也就是说当前js引擎不支持访问器属性，却在属性描述符中设置了get，set,那么就会抛出异常。查看 defineGetter 的兼容状况，只兼容IE11，虽然IE九、IE10一样不支持defineGetter,不过他们直接支持Object.defineProperty方法和get语法，无需sham，因此代码并不会走到异常这里。可是IE8如下就扯淡了。解决这种状况只能修改源代码了。

至此，Webpack打包时，IE低版本浏览器(IE8及如下)遇到的兼容问题就总结这里，若是你有新的问题，欢迎留言。