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

需求：网站的所有页面都要跑一个脚本，由于这个脚本的功能有很多，所以考虑使用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），但提供了非常好的分析思路，值得学习。

个人建了前端学习群，旨在一起学习前端。纯净、纯粹技术讨论，非前端人员勿扰！入群加我微信：iamaixiaoxiao。

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/wulixiaoxiao1/article/details/61197001
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-06-27 21:27:30
阅读 ( 1231 )
分类：

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

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看