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

红太狼 2022-09-28 11:39 226阅读 0赞

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

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

第一个错，是转出来一个default，被ie8判错，于是在看过[知乎上的一个讨论][Link 1]之后，增加了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里，那么可以在[这里][Link 2]找一找。找到后引入到项目内即可。

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

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

![1460000008545203_w_276_h_261][]

[Link 1]: https://www.zhihu.com/question/37939963
[babel-preset-es2015-loose]: https://www.npmjs.com/package/babel-preset-es2015-loose
[Link 2]: https://gist.github.com/jkin8010/2692187
[UED]: http://www.aliued.com/?p=3240
[Link 3]: http://lib.csdn.net/base/wechat
[1460000008545203_w_276_h_261]: /images/20220708/d00c32ea696f4e72ac25a19ae7ddfa04.png

发表评论取消回复

表情：

评论列表（有 0 条评论，226人围观）

还没有评论，来说两句吧...

相关阅读

相关 ie8如何兼容媒体查询

ie8如何兼容媒体查询 ie8中媒体查询存在兼容问题，需要在html dom 和css加载完成后，再引入respond.js <script src="h

蔚落/ 2023年07月19日 04:57/ 0 赞/ 18 阅读

相关如何让ie8支持foreach

如何让ie8支持foreach ie8及ie8以下会存在无法使用foreach的问题，解决方法如下： if ( !Arra

╰半夏微凉°/ 2023年07月18日 04:59/ 0 赞/ 3 阅读

相关 IE8如何兼容placeholder解决方案

IE8如何兼容placeholder解决方案 ie8和ie9中会出现placeholder不兼容的问题。原因：placeholder是h5的新属性，IE10以前的浏览

傷城~/ 2023年05月28日 05:02/ 0 赞/ 17 阅读

相关如何让rgba()属性兼容IE9以下版本

rgba()，只支持IE9+ 如何解决兼容性问题呢？示例 background-color:rgba(0,0,0,0.3) background-color:\0

矫情吗；*/ 2022年11月30日 04:25/ 0 赞/ 156 阅读

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

需求：网站的所有页面都要跑一个脚本，由于这个脚本的功能有很多，所以考虑使用webpack将其中的每个功能模块化。使用webpack，就自然想到用es6爽一爽吧。为了兼容尽可能多

红太狼/ 2022年09月28日 11:39/ 0 赞/ 227 阅读

相关各种IE兼容模式代码,IE6,IE7,IE8,IE9,IE10

在这里送上几种IE使用模式： 1.强制使用IE5模式来解析 1 <meta http-equiv=“X-UA-Compatible” content=“IE=5″>

迷南。/ 2022年09月22日 14:57/ 0 赞/ 430 阅读

相关 IE8兼容fontAwesome

bootstrap中我们使用到了fontAwesome来显示图标，但是在IE8下回出现无法显示的问题，如下图： 1）图标未显示 ![Center][] 2）图标应该

阳光穿透心脏的1/2处/ 2022年06月16日 14:12/ 0 赞/ 317 阅读

相关 IE8 兼容rgba

关于rgba的内容不介绍了，直接贴代码。 background-color: rgba(0,0,0,0.4); filter:progid:

矫情吗；*/ 2022年06月11日 01:18/ 0 赞/ 277 阅读

相关圆角兼容ie8

ie8下不支持圆角属性，这里需要引入iecss3.htc文件演示地址：[http://www.bright2017.top/test1/test1-17/][ht

偏执的太偏执、/ 2022年05月22日 08:37/ 0 赞/ 237 阅读

相关 webpack-模块化兼容性

模块化兼容性由于webpack同时支持CommonJS和ES6 module，因此需要理解它们互操作时webpack是如何处理的同模块化标准如果导出和导入使

墨蓝/ 2021年08月27日 00:58/ 0 赞/ 411 阅读