修复 IE8 webpack 兼容性的问题

由于需要支持 IE8 ,因此我们直接使用 babel 转换出来的 es5 代码在 IE8 上并不能很好的运行,而且修复这个问题会让大家 头痛 ヽ(`Д´)ノ。

大概这里简单说下解决问题的一些关键方法吧。

es3ify-loader

es3ify-loader 大概是第一个让你看到希望的。你需要在 postLoaders 或者放在 babel 转换前。

 module: {
            loaders: [
            {
                test: /\.js?$/,
                loaders: ['es3ify-loader'],
            },
            {
                test: /\.js?$/,
                loaders: ['babel-loader'],
            },
            
        ]
    }

这个是可以解决抛出 default 关键词的问题,
比如我们会看到 这样的问题:

expected identifier

es5-shim

当然这个问题解决后面,可能还会遇到这个问题:

Exception throw and not caught

你可以在入口文件引入

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

如果还是错误定位到 defineProperty 的 时候,这个时候就需要耐心对定位的文件进行查看了。我当时也是这样的,最后通过分析转换出来的代码,发现重复定义了 key 。

module.exports = {
	a: function() {
	    // ...
    },
    ...
    a: function() {
	    // other code
    },
}

这个时候会反复出现对与 _defineProperty 函数的调用。去除掉重复的 key 就好。

不要问我为什么会有重复的 key , 对方就是这个表情: