修复 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 , 对方就是这个表情: