In Es6 geschriebene Dateiimportlösung (detaillierte Interpretation)

In diesem Artikel werden hauptsächlich relevante Informationen zum Importieren von in es6 geschriebenen Dateien vorgestellt.

Während dieser Zeit habe ich ein wenig über die neuen Spezifikationen von es6 gelernt Ich bin aus einer Laune heraus darauf gekommen und möchte versuchen, den in ES6 geschriebenen Code im Browser auszuführen.

Lassen Sie mich zuerst über meine Implementierungsschritte sprechen

1. Übersetzen Sie den ES6-Code in ES5;

2. HTML-Datei nach dem Importieren der Übersetzung ES5;

3. dann in der Browserumgebung ausführen

4. in der Knotenumgebung ausführen; 🎜>Dann unten sind einige meiner Verzeichnisstrukturen, eine grobe Vorschau.

src, es6-Entwicklungsverzeichnis

dist, es5-Produktionsverzeichnis

test, ein Test Inhaltsverzeichnis

Dann werfen wir einen Blick darauf, wie einige der Js aussehen, die ich mit ES6 entwickelt habe.

Datei

Datei2

App

Test

Dann führen wir die übersetzte Datei in dist in HTML ein

Test im Browser, da im Test kein Modul eingeführt wird, wird es normal ausgeführt. In der App wird das Modul eingeführt und es handelt sich um eine CommonJS-Spezifikation, aber der Browser unterstützt diese Spezifikation nicht . Daher wird der Fehler

Wenn wir zu Testzwecken die requireJS-Datei zum HTML hinzufügen, unterstützt der Browser die AMD/CMD-Spezifikation. Definitionen asynchron laden.

Wir haben jedoch festgestellt, dass weiterhin ein Fehler gemeldet wird, der darauf hinweist, dass die Syntax nicht unterstützt wird oder dass die beiden in Konflikt stehen, da einer AMD und der andere CommonJS ist.

Da wir ES6 über Node in ES5 kompilieren, bezieht sich das Node-Modul auf die CommonJS-Spezifikation, sodass die Syntax von ES5 auch zur CommonJS-Spezifikation und aktuellen Browsern und Node gehört unterstützt ES6-Spezifikationen nicht oder die meisten davon nicht.

Lösung

Nachdem ich die Informationen konsultiert hatte, stellte ich fest, dass die Abhängigkeiten über das Webpack-Paketierungstool in einer Datei zusammengeführt und dann in HTML eingeführt werden können

Das Obige ist was Ich habe es für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

JS

Erstellen einer Hash-Tabellenfunktion

JS

Detaillierte Erläuterung der Schritte zum Abrufen von URL-Parametern und Senden von POST im JSON-Format

JS

Zusammenfassung der EventEmitter-Nutzungsfähigkeiten

Das obige ist der detaillierte Inhalt vonIn Es6 geschriebene Dateiimportlösung (detaillierte Interpretation). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!