webpack+babel+transform-runtime, IE fordert Promise undefinierte Lösung

Wissensanforderungen

• babelGrundkenntnisse (empfehlen Ruan Yifengs Babel-Einführungs-Tutorial)

• Vollständiges Verständnis von babel-plugin-transform-runtime und The Rolle von babel-runtime (empfohlene Github-Projekt-Homepage)

• webpack2Grundlegende Verwendung

• webpack2 Die Rolle von babel-loader in import

  🎜>Asynchrones Laden

Problembeschreibung

webpackbabel-loader+transform-runtime+PromiseNormalerweise sollte das Durchsuchen möglich sein ohne native UnterstützungIE Es läuft normal unter dem Browser (z. B. IE11), aber tatsächlich wird unter Promise immer noch der Fehler

undefiniert angezeigt. Ich habe im Internet recherchiert, aber nichts passendes gefunden, also habe ich es einfach selbst analysiert.

Analyse

babel Überprüfen Sie zunächst, ob das transform-runtime von js gültig ist, und schreiben Sie den Beispielcode von var promise = new Promise(resolve, reject) in Ihr eigenes Promise Code, Es wurde festgestellt, dass babel ersetzt wurde. Der Schlüssel zur Frage ist also, was außerhalb der Kontrolle von

liegt.

Was ich denke, ist node_moduleswebpack im Vergleich zu dem Code , der von

selbst generiert wird.

babel Bevor ES6 zum Konvertieren von node_modules verwendet wird, können die über
referenzierten Drittanbieterpakete normal verwendet werden, sodass sie ausgeschlossen werden können. webpack Was ist also mit GOOGLE? Ich habe in webpack promise not defined nach

gesucht und den Grund gefunden, wie im Bild unten gezeigt:

webpackBei Verwendung von webpack Beim asynchronen Laden erfordert Promise native Unterstützung

, was in unserem Code nützlich ist. Zu diesem Zeitpunkt wurde der Grund gefunden: Der von

webpacknew Promise generierte babel-bezogene Code liegt außerhalb des Kontrollbereichs von transform-runtime. Es kann nur der globale Promise exportiert werden dieses Problem lösen.

Lösung 1

• Einführen von babel-polyfill zum Exportieren globaler Promise, diese Methode ist nicht nur gut, sondern wirft auch viel aus Bei anderen globalen Objekten besteht möglicherweise ein Konfliktrisiko und die Dateigröße ist relativ groß. Promise

Lösung 2

Fügen Sie

am Anfang der js-Datei hinzu: window.Promise = Promise

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

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

Prinzip: Wenn

prüft babels js, Promise konvertiert transform-runtime und wirft es dann als globales Objekt, um den gleichen Effekt wie Promise zu erzielen. babel-polyfill

Das obige ist der detaillierte Inhalt vonwebpack+babel+transform-runtime, IE fordert Promise undefinierte Lösung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!