webpack+babel+transform-runtime, IE prompts Promise undefined solution

Knowledge requirements

• 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

• webpack2babel-loaderfunction,importasynchronous loading

Problem Description

webpack+babel-loader+transform-runtimeNormally 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.

Analysis

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 webpackthe 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

new Promise

related code generated by webpack exceeds the transform-runtime## of babel #'s control scope, only exporting the global Promise can solve this problem.

Solution 1

• Introduction

  babel-polyfillExport globalPromise, this method is not good; not onlyPromise 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.

Solution 2

Add

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!