ribbon image search rewind fast-forward speech-bubble pie-graph star

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

You Can Speak "Hi" to Me in Those Ways