如何让webpack模块化代码兼容到ie8

作者: stois | 来源:发表于2017-01-04 18:57 被阅读3147次

    需求:网站的所有页面都要跑一个脚本,由于这个脚本的功能有很多,所以考虑使用webpack将其中的每个功能模块化。使用webpack,就自然想到用es6爽一爽吧。为了兼容尽可能多的浏览器,当然坑也一个一个的冒了出来。

    经过babel编译的代码,在chrome上当然没问题。但是用ie8打开,控制台报错。

    第一个错,是转出来一个default,被ie8判错,于是在看过知乎上的一个讨论之后,增加了postloader,大意是babel把代码从es6转成es5, 我们再用es3ify把代码从es5转成es3....

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

    然后我们又发现,有个错误叫做 Object.defineProperty ,于是安装babel-preset-es2015-loose, 在webpack上js的loaders配置成:

               {
                    test: /\.js$/,
                    loader: 'babel-loader',
                    
                    query: {
                      presets: ['es2015-loose']
                    }
                    
                }
    

    然后我们的命令行上会报很多错,错到你怀疑自己是不是脑袋有问题。但最后居然编译成功了。
    然后打开ie8,可以结束今天的工作了。

    如果你发现某些es5的方法不存在es3里,那么可以在这里找一找。找到后引入到项目内即可。

    此外,有一篇阿里UED的文章,没有解决这个问题(因为没使用loose),但提供了非常好的分析思路,值得学习。

    相关文章

      网友评论

        本文标题:如何让webpack模块化代码兼容到ie8

        本文链接:https://www.haomeiwen.com/subject/dgqavttx.html