Home  >  Article  >  Web Front-end  >  webpack+babel+transform-runtime, IE prompts Promise undefined solution

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

一个新手
一个新手Original
2018-05-14 16:27:456330browse

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.

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

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:

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

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn