前端

webpack uglifyJS 在 IE8 下的兼容处理

最近在做组件项目，写 ES6 代码，通过 webpack3 进行打包，中途用 uglifyjs-webpack-plugin 插件进行压缩。

考虑到各个项目都能用得上，所以最终打包格式选择了 umd。

基础处理

首先，IE8 不支持的东西太多了，所以必须用垫片修补下。

由于我确实不了解 babel-polyfill，而且组件可能不只这一个，也不可能只在一个项目中去用，看了下 babel-polyfill 的引入方式，基本上都是直接放到最终代码中的，在大项目中我认为算是首选。

所以采用了 shim + sham 的方案，个别功能（比如 Element.prototype.classList），采用自己写补丁的方式实现。

最终，在页面这样写：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <!--[if lt IE 9]>
    <script src="../lib/es5-shim.min.js"></script>
    <script src="../lib/es5-sham.min.js"></script>
    <![endif]-->
    <!--[if lte IE 9]>
    <script src="../lib/ie.min.js"></script>
    <![endif]-->
</head>
<body>
  ...
</body>
</html>

通过 IE 的注释语法，特定情况下加载特定 JS 来实现。

由于我需要针对 IE9 做一些补丁，所以额外打了一个 ie.min.js 补丁。

这样，大部分ES5 的兼容性问题都可以解决了。

webpack

首先说说 webpack，这个网上有人说，webpack1 支持 IE8，从 webpack2 开始不支持了。

具体我没有深究，但是我用 webpack3，是可以实现兼容的。

首先是必须打上面的补丁，让 IE8 支持 ES5，最重要的是 sham 也是必须的，主要用来实现 Object.defineProperty ，虽然可能稳定性欠佳。

webpack 打包（umd 方式）后，未压缩的代码部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Checkbox = function () {
  function Checkbox(element) {
    var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
    _classCallCheck(this, Checkbox);
  }
  _createClass(Checkbox, [{
    key: 'on',
    value: function on() {    }
  }]);
  return Checkbox;
}();

之后，webpack 采用 defineProperty 进行定义属性，所以才必须打这个补丁。

可能 webpack1 最终打包的方式不同，不需要对 Object.defineProperty 打补丁，才有人说 webpack1 才支持 IE8 这种说法。

本身，webpack 不需要做任何兼容处理修改，只需要之前的补丁即可。

小问题

但是，在编译过程中，曾经遇到了一个问题，随后莫名其妙自己没问题了，尚不清楚原因所在。

在上面代码中，有一步 _classCallCheck(this,Checkbox)，这个竟然 throw new TypeError 了，原本上用 class Checkbox，改成了 function Checkbox(){}，最后又改回去了，自己就好了。

代码压缩 uglifyJS

这个问题比较大，不过还好可以通过配置来解决。

首先，webpack3 的插件 uglifyjs-webpack-plugin 目前只支持 uglify-js 2.x 系列。所以必须确保 uglify-js 是2.x 版本。

就在写这篇文章前 9 天，uglifyjs-webpack-plugin 开始支持 uglify-js 3.x 系列了。

上面这个解决，下面的问题就好说了。

说先明确下，uglifyJS 默认压缩，不兼容 IE8 的，但是它有一个配置，可以兼容 IE8。

方法描述摘抄如下：

1
2
3
4
5
6
>--screw-ie8     Use this flag if you don't wish to support
               Internet Explorer 6/7/8.
               By default UglifyJS will not try to be IE-proof.
>--support-ie8   Use this flag to support Internet Explorer 6/7/8.
               Equivalent to setting `screw_ie8: false` in `minify()`
               for `compress`, `mangle` and `output` options.

意思是说， --screw-ie8 开启后，不支持IE6/7/8。但是可以关闭啊。默认是开启的。--support-ie8 也行，等同于设置 balabala 很多兼容 IE 的参数。

这里有个坑，那就是：uglifyjs-webpack-plugin 不支持 --support-ie8 这个参数。issue 见此

所以换成 --screw-ie8 就好了。具体配置如下：

1
2
3
4
5
6
7
8
9
new UglifyJSPlugin({
    compress: {screw_ie8: false},
    output: {screw_ie8: false},
    mangle: {
      screw_ie8: false, 
      except: ['$']
    },
    support_ie8: true
})

就是在 compress 中写入 screw_ie8 就好了。

至于网上说的什么 IE8 不能支持混淆啥的，我没发现问题，可以使用混淆。