webpack+babel项目在IE下报Promise未定义错误引出的思考

低版本浏览器引发的问题

最近开发一个基于webpack+babel+react的项目，通常本地是在chrome浏览上面开发，chrome浏览器开发由于支持大部分新的js特性，因此通常不怎么须要polyfill， 好比Promise，string实例的includes方法等。即便在低版本浏览器中，经过babel-runtime的polyfill也是能够转换的，可是事不居然，项目在IE9浏览器上报错，错误以下截图：

很明显，项目中使用了Promise，可是IE9又不支持该新特性，因此致使报错。

那么， 问题来了，babel-runtime不是会自动polyfill项目中的Promise功能么，为啥没有呢？下面就来一探究竟。

babel-runtime真的帮咱们转换了么

按照babel官网的介绍，babel-runtime跟babel-polyfill同样，都是对不支持的新功能进行polyfill，只是：

• babel-runtime: 他不会污染全局环境，会在局部进行polyfill，另外不会转换一些实例方法，如'abc'.includes('a')，其中的includes方法就不会翻译。它通常结合babel-plugin-transform-runtime来使用。

• babel-polyfill：简单粗暴，他会污染全局环境，好比在不支持Promise的浏览器会polyfill一个全局的Promise对象供调用；另外，不支持的实例方法也在对应的构造函数原型链上添加要polyfill的方法。

那么上面例子中的Promise，babel-runtime真的帮咱们转换了么，在项目中测试一下，发下它确实转换了。

let _promise = new Promise()

如上，在代码中测试一下，查看对应的转换文件：

能够看到，在项目中，babel-runtime真的帮咱们进行了polyfill，那为啥还会报上面的Promise未定义的错误呢？？？

Promise未定义错误真凶

既然babel-runtime会对通过babel编译的代码进行代码转换，那么能够猜测：

错误的真正缘由是一些代码没有通过babel-runtime编译转换。

首先想到的是node_modules模块，由于一些npm包在webpack配置中不须要babel的编译，而这些包可能须要Promise的原生支持功能.

如vuex，以前就有人在github上提出过相似的问题vuex requires a promise polyfill in this browser。由于在它源码里面是这样判断的：

assert(typeof Promise !== 'undefined', "vuex requires a Promise polyfill in this browser.");

这样的状况须要主要，通过排查，在本项目中，没有发现是由于npm包引发的。那么还有一种可能：webapck自己产生的一些代码。

经过定位错误发生地方，发现确实是webpack自身产生的代码须要Promise。在webpack的官网也找到了答案：

能够发现，在webpack使用异步加载模块时， require.ensure须要原生支持Promise，由于咱们项目是按需加载，因此才致使上面问题的产生。即：

webpack生成的new Promise相关代码, 超出babel的babel-runtime的控制范围，只有polyfill全局的Promise才能解决此问题。

解决上面的问题， 大部分人会想到使用其余Promise的polyfill库，如babel-polyfill或者es6-promise等，这当然是一个解决办法，可是能够结合babel-runtime的转换功能来为全局Promise进行polyfill，不会引入额外的库。代码以下：

// 将Promise抛出为全局对象
window.Promise = Promise

而后babel-runtime会将其转化为以下：

// 将Promise抛出为全局对象
window.Promise = __WEBPACK_IMPORTED_MODULE_0_babel_runtime_core_js_promise___default.a()

这样，将babel-runtime的Promise的polyfill挂到window下，达到其余Promise的polyfill的效果。

在跨浏览器中的选择

本人的大部分后台项目，通常会要求使用人员使用chrome浏览器，只选择babel-runtime就能够知足需求，由于chrome大部分js新特性都支持，如字符串实例的includes， 虽然babel-runtime不会编译，可是浏览器本身会支持，不会产生问题。可是对于跨浏览器的项目就须要特别考虑了。

• 对于跨浏览器的项目，尤为是低版本的IE时，建议选择babel-polyfill, 它能够对静态或者实例方法都会转换

• 对于指定的浏览器的项目如chrome，直接使用babel-runtime来进行转换，它不会对实例方法进行转换。

参考文献

一、webpack文档
二、babel的polyfill和runtime的区别
三、babel原理和polyfill和runtime的区别
四、webpack+babel+transform-runtime, IE下提示Promise未定义？
五、ES6 + Webpack + React + Babel 如何在低版本浏览器上愉快的玩耍（下）