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

红太狼 2022-09-28 11:39 194阅读 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 条评论，194人围观）

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

相关阅读

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

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

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

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

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

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

相关各种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 赞/ 342 阅读

相关一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

在网站开发中不免因为各种兼容问题苦恼，针对兼容问题，其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题百度源代码如下 <

你的名字/ 2022年09月21日 04:51/ 0 赞/ 273 阅读

相关 IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例

[IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例][IE6_IE7_IE8_Firefox_CSS HACK] [![336-280.jpg][]

柔光的暖阳◎/ 2022年08月07日 03:49/ 0 赞/ 190 阅读

相关 IE8兼容fontAwesome

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

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

相关 IE8 兼容rgba

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

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

相关圆角兼容ie8

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

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

相关从模块化开始到webpack入门

在查找webpack的资料的时候，发现大部分的资料对webpack的定义都是这样 webpack是当下最热门的前端资源模块化管理和打包工具（就是一个打包器），可以将许多松散的

深藏阁楼爱情的钟/ 2022年03月18日 04:28/ 0 赞/ 221 阅读

相关 webpack-模块化兼容性

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

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