webpack+babel+transform-runtime, IE invite à promettre une solution non définie

Connaissances requises

• babelConnaissances de base (recommander le didacticiel d'introduction Babel de Ruan Yifeng)

• Compréhension complète de babel-plugin-transform-runtime et de The rôle de babel-runtime (page d'accueil du projet github recommandée)

• webpack2Utilisation de base

• webpack2 Le rôle de babel-loader dans import

  🎜>Chargement asynchrone

Description du problème

webpackbabel-loader+transform-runtime+PromiseNormalement, il devrait être possible de parcourir sans support natifIE Il fonctionne normalement sous le navigateur (comme IE11), mais en réalité sous Promise, il provoque toujours l'erreur

non définie. J'ai cherché sur Internet, mais je n'ai rien trouvé de pertinent, alors je l'ai analysé moi-même.

Analyse

babel Confirmez d'abord si le transform-runtime de js est valide, écrivez l'exemple de code de var promise = new Promise(resolve, reject) dans le vôtre Promise code, j'ai constaté que babel a été remplacé. La clé de la question est donc de savoir ce qui échappe au contrôle de

 ?

Ce à quoi je pense, c'est node_moduleswebpack par rapport au code généré par

lui-même.

babel Avant d'utiliser ES6 pour convertir node_modules, les packages tiers référencés via
peuvent être utilisés normalement, ils peuvent donc être exclus. webpack Alors qu'en est-il de GOOGLE ? J'ai cherché webpack promise not defined dans

et j'ai trouvé la raison, comme le montre l'image ci-dessous :

webpackLors de l'utilisation de webpack Lors d'un chargement asynchrone, Promise nécessite un support natif

, ce qui s'avère utile dans notre code. À ce stade, la raison a été trouvée : le code associé à

généré par webpacknew Promisebabel échappe au contrôle de transform-runtime Promise. Seule l'exportation du

global peut être effectuée. résoudre ce problème.

Solution 1

• babel-polyfillIntroduire Promise pour exporter globalement Promise, cette méthode n'est pas bonne non seulement

  est exportée, mais en jette aussi beaucoup ; d'autres objets globaux, il peut y avoir un risque de conflit et la taille du fichier est relativement importante.

Solution 2

jsAjouter window.Promise = Promise au début du fichier

Exemple de code :

import 'jquery'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap'

// 将Promise抛出为全局对象
window.Promise = Promise
。。。

babelPrincipe : Quand <.> vérifie js de Promise, transform-runtime convertira Promise puis le lancera en tant qu'objet global pour obtenir le même effet que babel-polyfill.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!