webpack3-坑不起

现在很多人都在用webpack做打包。react+webpack或者vue+webpack都很火，但是不凡会遇到很多坑，这里我也遇到了，特别是在十万个cnm的IE上，我是哭了好久哟。

一、babel-polyfill 解决缺失API问题

即对一些ES6 API缺失的模拟。比如常见的Object.assign，Promise对象，fetch等等，这些可以通过统一引用“babel-polyfill”来解决，如果感觉“babel-polyfill”太重，也可以针对所需要的API自行引用对应的polyfill。polyfill的应用可以有两种方式：

• npm包的方式，在编译入口文件通过require(“babel-polyfill”)引入执行。
• 也可以在页面上，业务js前引入babel的script标签。

以及console对象的兼容问题就比较简单，也都可以通过对应polyfill解决，就不多做解释。

二、最麻烦的Object.defineProperty

在IE8中有自己实现的Object.defineProperty,它的行为和标准不同，且只能接受DOM对象，如果传入普通javascript对象会抛异常。
babel会把 export(非import) 编译成 Object.defineProperty的方式。相信添加这个问题的时候，babel确实存在这样的转换，具体的issues也有人提过 babel-export，而提供的解决方案—-引入es5-shim和es5-sham在这种情况下是也确实是可行的。不过目前的babel版本已经不会有这种转换（却还存另一个转换的坑），但是es5-shim和es5-sham的引用是必要的，因为它是解决通用性的es3环境下es5 API的缺失问题，就像babel-polyfill一样，Object.defineProperty是其中的一个API。

以上是现有常规的兼容方案，很多人使用也没有存在太多问题。

• ie8不支持设置访问器属性，即便是引了es5-shim;
• Babel 会把export xxx from ‘xx’ 语法转码为访问器属性设置的exports对象。
• 而react-router-react的index.js 偏偏用了export xxx from ‘xx’这样的语法。

解决办法

• 最直接的解决办法就是Babel修复这种转码方式，目前已经有人提过issue,但是尚未解决
• 其次，不要用export xx from ‘xx’的方式，如果在第三方包中有，你就找到他的源码，放到你自己的libs下边，改源码吧。