webpack+babel+transform-runtime, IE下提示Promise未定义?
知识要求
babel
的基础知识(推荐阮一峰的babel入门教程)- 充分理解
babel-plugin-transform-runtime
与babel-runtime
的作用(推荐github项目首页) webpack2
基础用法(https://webpack.js.org/)webpack2
中babel-loader
作用,import
异步加载
问题说明
webpack
+babel-loader
+transform-runtime
正常来讲应该能实现在没有原生支持Promise
的浏览器(如IE
)下正常运行,但是实际在IE11
下,还是提示Promise
未定义的错误。网上找了一圈,没有切中要害的,于是干脆自己分析。
分析
首先确认babel
的transform-runtime
是否生效,在自己的js
代码中编写var promise = new Promise(resolve, reject)
的示例代码,发现Promise
是有被替换的。所以问题的关键在于什么东西超出了babel
的控制?
我想到的是node_modules
与webpack
本身生成的代码。
在使用babel
转换ES6
之前, 通过node_modules
引用的第三方包都能正常使用,因此可以排除。
那么webpack
呢,在GOOGLE
中搜索webpack promise not defined
,还真找到了原因,如下图所示:
图片来源: https://webpack.js.org/guides/migrating/#require-ensure-and-amd-require-are-asynchronous
当使用了webpack
的异步加载时,webpack
要求原生支持Promise
,刚好我们的代码有用到。至此,原因就找到了:
webpack
生成的new Promise
相关代码, 超出babel
的transform-runtime
的控制范围,只有导出全局的Promise
才能解决此问题。
解决方案1
- 引入
babel-polyfill
导出全局Promise
,这种方法并不好;不仅Promise
被导出,还抛出大量其他的全局对象,可能存在冲突风险,同时文件体积比较大。
解决方案2
在js
文件开头添加window.Promise = Promise
这一句即可,示例代码:
import 'jquery'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap'
// 将Promise抛出为全局对象
window.Promise = Promise
。。。
原理:当babel
检查到js
的Promise
时,transform-runtime
会将Promise
做转换,然后将其抛出为全局对象即可达到跟babel-polyfill
一样的效果。