最近开发一个基于 webpack+babel+react 的项目,一般本地是在 chrome 浏览上面开发,chrome 浏览器开发因为支持大部分新的 js 特性,所以一般不怎么需要 polyfill, 比如 Promise,string 实例的 includes 方法等。即使在低版本浏览器中,通过 babel-runtime 的 polyfill 也是可以转换的,但是事不竟然,项目在 IE9 浏览器上报错,错误如下截图:
很明显,项目中使用了 Promise,但是 IE9 又不支持该新特性,所以导致报错。
那么, 问题来了,babel-runtime 不是会自动 polyfill 项目中的 Promise 功能么,为啥没有呢?下面就来一探究竟。
按照 babel 官网 的介绍,babel-runtime 跟 babel-polyfill 一样,都是对不支持的新功能进行 polyfill,只是:
来使用。
- babel-plugin-transform-runtime
那么上面例子中的 Promise,babel-runtime 真的帮我们转换了么,在项目中测试一下,发下它确实转换了。
- let _promise = new Promise()
如上,在代码中测试一下,查看对应的转换文件:
可以看到,在项目中,babel-runtime 真的帮我们进行了 polyfill,那为啥还会报上面的 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 不会编译,但是浏览器自己会支持,不会产生问题。但是对于跨浏览器的项目就需要特别考虑了。
1、 webpack 文档
2、 babel 的 polyfill 和 runtime 的区别
3、 babel 原理和 polyfill 和 runtime 的区别
4、 webpack+babel+transform-runtime, IE 下提示 Promise 未定义?
来源: http://www.cnblogs.com/wonyun/p/8076453.html