webpack+babel+transform-runtime, IE下提示Promise未定义的解决方法
知识要求
babel
的基础知识(推荐阮一峰的babel入门教程)充分理解
babel-plugin-transform-runtime
与babel-runtime
的作用(推荐github项目首页)webpack2
基础用法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
,还真找到了原因,如下图所示:
当使用了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
一样的效果。
以上就是webpack+babel+transform-runtime, IE下提示Promise未定义的解决方法的详细内容,更多请关注其它相关文章!
推荐阅读
-
IE8下载不提示保存对话框问题的解决方法
-
IE8下载不提示保存对话框问题的解决方法
-
vue-cli项目在IE下运行钩子函数抛出异常“ReferenceError: “Promise”未定义"”的解决办法
-
webpack+babel+transform-runtime, IE下提示Promise未定义的解决方法
-
ie9 提示'console' 未定义问题的解决方法_javascript技巧
-
ie9 提示'console' 未定义问题的解决方法_javascript技巧
-
vue-cli项目在IE下运行钩子函数抛出异常“ReferenceError: “Promise”未定义"”的解决办法
-
webpack+babel+transform-runtime, IE下提示Promise未定义的解决方法