Home >Web Front-end >JS Tutorial >webpack+babel+transform-runtime, IE prompts Promise undefined solution
Basic knowledge of babel
(recommend Ruan Yifeng’s babel introductory tutorial)
Fully understand The role of babel-plugin-transform-runtime
and babel-runtime
(recommended github project homepage)
webpack2
Basic usage
webpack2
babel-loader
function,import
asynchronous loading
webpack
+babel-loader
+transform-runtime
Normally speaking, it should be possible without native support# It runs normally under Promise
browsers (such as IE
), but actually under IE11
, an Promise
undefined error is still prompted. I searched around on the Internet, but couldn't find anything that hit the mark, so I just analyzed it myself.
First confirm whether the transform-runtime
of babel
is effective, in your own Write the sample code of
var promise = new Promise(resolve, reject) in js
code, and find that Promise
has been replaced. So the key to the question is what is beyond babel
's control?
What I am thinking of is node_modules
versus webpack
the code generated by itself.
Before using babel
to convert ES6
, the third-party packages referenced through node_modules
can be used normally, so they can be excluded.
So webpack
, search webpack promise not defined
in GOOGLE
, and I really found the reason, as shown in the figure below:
When using asynchronous loading of webpack
, webpack
requires native support for Promise
, which happens to be useful for our code. At this point, the reason has been found: the
related code generated by webpack
exceeds the transform-runtime## of
babel #'s control scope, only exporting the global
Promise can solve this problem.
babel-polyfillExport global
Promise, this method is not good; not only
Promise is exported and also throws out a large number of other global objects, which may cause conflict risks, and the file size is relatively large.
window.Promise = Promise at the beginning of the
js file, sample code :
import 'jquery' import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap' // 将Promise抛出为全局对象 window.Promise = Promise 。。。Principle: When
babel checks the
Promise of
js,
transform-runtime will
Promise Convert it and then throw it as a global object to achieve the same effect as
babel-polyfill.
The above is the detailed content of webpack+babel+transform-runtime, IE prompts Promise undefined solution. For more information, please follow other related articles on the PHP Chinese website!