Umzug ES6 -Module in AMD & CommonJs mit Babel & Gulp

Kernpunkte

• ecmascript 6 (ES6) hat JavaScript viel Verbesserungen vorgenommen, um der aktuellen Verwendung zu entsprechen, einschließlich der Möglichkeit, verschiedene Teile der Anwendung in Form von Modulen zu laden. Allerdings haben nicht alle Browser alle ES6 -Funktionen implementiert, und hier kommen Übersetzer wie Babel und Traceur ins Spiel.
• Babel und Gulp können verwendet werden, um ES6 -Module in CommonJs oder AMD zu übersetzen, sodass sie von den heutigen Browsern gelesen werden können. Bei diesem Vorgang werden die Gulp -Aufgabe von Babel verwendet, um Module in eines der vorhandenen Modulsysteme umzuwandeln und die Anwendung dann in eine einzelne Datei zu verpacken, damit der Browser verwendet werden soll.
• CommonJS ist ein von Node.js verwendetes Synchronmodulsystem, das Module unter Verwendung der Erforderungsfunktion lädt und sie unter Verwendung der Exporteigenschaft des Modulobjekts exportiert. Das Umwandeln eines ES6 -Moduls in CommonJs beinhaltet die Verwendung einer Kombination aus Babel, Browserify und Gulp.
Das AMD -System (🎜> Async Modul Definition) ermöglicht es, mehrere abhängige Module parallel zu laden. Um das ES6 -Modul in AMD umzuwandeln, verwenden wir Babel, RefordeJs und Gulp. Sie können dann das endgültige Skript direkt auf der Seite index.html verweisen und es im Browser anzeigen.

ecmascript 6 (auch bekannt als ecmascript 2015 oder ES6) wurde die Spezifikation für die nächste Version von JavaScript genehmigt und Browseranbieter arbeiten daran, sie zu implementieren. Im Gegensatz zu früheren Versionen von ECMascript hat ES6 eine große Veränderung der Sprache vorgenommen und es ermöglicht, sich gut an die heutige Nutzungsskala anzupassen. SitePoint verfügt über mehrere Artikel, die diese Funktionen abdecken.

Obwohl der Browser noch nicht alle Funktionen implementiert hat, können wir ES6 während der Entwicklung nutzen und die Anwendung in eine Version umwandeln, die der Browser verstehen kann, bevor sie sie liefert. Babel und Traceur sind zwei der für diesen Zweck verwendeten führenden Übersetzer. Der JavaScript -Typ von Microsoft Superset TypeScript kann auch als ES6 -Übersetzer verwendet werden.

In einem früheren Artikel habe ich erklärt, wie Sie ES6 verwenden, um Angular 1.x -Anwendungen zu schreiben. In diesem Beitrag habe ich Traceurs Instant -Übersetzer verwendet, um die Anwendung auszuführen. Während es funktioniert, ist es am besten, im Voraus zu übersetzen und die Arbeit zu reduzieren, die im Browser erledigt werden muss. In diesem Artikel werden wir sehen, wie die gleiche Beispielanwendung in ES5 übersetzt und das Modul in CommonJs oder AMD umgewandelt wird, wobei Babel verwendet wird, damit es auf den heutigen Browsern ausgeführt wird. Obwohl die Beispiele auf Angular basieren, können Translationstechniken für jeden gültigen ES6 -Code verwendet werden.

Wie immer finden Sie den dazugehörigen Code für diesen Artikel in unserem GitHub -Repository.

Die Bedeutung von Modulen

In jeder Sprache, die zum Schreiben großer Anwendungen verwendet wird, ist eine Schlüsselfunktion die Möglichkeit, verschiedene Teile einer Anwendung in Form von Modulen zu laden. Module helfen nicht nur dazu, den Code prägnanter zu machen, sondern auch eine Rolle bei der Verringerung der Verwendung des globalen Umfangs. Der Inhalt des Moduls wird keinem anderen Modul zur Verfügung gestellt, es sei denn, es ist explizit geladen.

Die Bedeutung von Modulen ist nicht auf Anwendungen beschränkt. Selbst große JavaScript -Bibliotheken können Modulsysteme verwenden, um ihre Objekte als Module zu exportieren, und Anwendungen, die diese Bibliotheken verwenden, können diese Module nach Bedarf importieren. Angular 2 und Aurelia haben mit dieser Funktion begonnen.

Wenn Sie einen kurzen Blick auf die Verwendung von Modulen in ES6 möchten, lesen Sie: ES6 -Module verstehen

Über die Beispielanwendung

Das Thema unserer Beispielanwendung ist ein virtuelles Bücherregal. Es enthält die folgenden Seiten:

1. Zuhause: Zeigt eine Liste aktiver Bücher an, die als Lesen oder Umge in das Archiv bewegt werden können.
2. Buchseite hinzufügen: Fügen Sie dem Bücherregal neue Bücher hinzu, indem Sie den Buchtitel und den Autoramen akzeptieren. Es erlaubt keine doppelten Titel.
3. Archivseite: Listen Sie alle archivierten Bücher auf.

Die Anwendung wird unter Verwendung von AngularJS 1.3 und ES6 erstellt. Wenn Sie sich mit Dateien im App -Ordner ansehen, sehen Sie den Exportieren und Importieren des Keywords für den Exportieren von Objekten aus dem aktuellen Modul und zum Importieren von Objekten aus anderen Modulen. Jetzt ist es unsere Aufgabe, diese Module mit Babels Gulp -Aufgabe in eines der vorhandenen Modulsysteme umzuwandeln.

Aber ich benutze Angular nicht. Ich möchte nur das ES6 -Modul in CommonJS/AMD

konvertieren

Mach dir keine Sorgen! Wir sind bereit für Sie. Mit nur einer geringen Menge an Optimierungen kann das unten gezeigte Rezept für jedes Projekt mit einem ES6 -Modul verwendet werden. Angular spielt hier keine Rolle.

in CommonJs

konvertieren

CommonJS ist ein Modulsystem, das von der CommonJS -Gruppe definiert ist. Es handelt sich um ein synchrones Modulsystem, bei dem das Modul unter Verwendung der Erforderungsfunktion geladen wird und das Modul unter Verwendung der Exporteigenschaft des Modulobjekts exportiert wird. Modulobjekte sollten standardmäßig in allen Modulen verfügbar sein.

node.js verwendet dieses Modulsystem, sodass es das Modulobjekt nativ definiert und es Ihrer Anwendung bereitstellt. Da der Browser dieses Objekt nicht definiert, müssen wir ein Dienstprogramm namens Browserify verwenden, um die Lücke auszufüllen.

Wir müssen auch einige NPM -Pakete installieren, bevor wir beginnen. Auf diese Weise können wir Babel und Browserify mit Gulp verwenden, um unsere ES6 -Module in ein der gängigen Modulformate umzuwandeln und die Anwendung als einzelne Datei für den Browser zu verpacken.

• Gulp-Babel-Konvertieren Sie den ES6-Code in den normalen ES5
• Browserify - Ermöglicht Ihnen in Ihrem Browser ('Module'), indem du alle Abhängigkeiten bündelt
• Vinyl-Source-Stream-Behandeln Sie das Browserify-Modul direkt, um zu vermeiden
Vinyl-Buffer-Konvertieren Sie Streams in Puffer (für die Schluck-UKLIFY, die keine Streams unterstützt)
GULP-UGLIFY-Komprimierte Datei
del - Ermöglicht Ihnen die Löschen von Dateien und Ordnern
Gulp-Rename-Ein Plugin, mit dem Sie Dateien
• umbenennen können

Sie können all dies durch Eingeben erhalten:

<code>npm install gulp-babel browserify gulp-browserify vinyl-source-stream vinyl-buffer gulp-uglify del gulp-rename --save-dev</code>

Lassen Sie uns nun diese Pakete in unserer gulpfile.js verwenden. Wir müssen eine Aufgabe schreiben, um alle ES6 -Dateien zu erhalten und an Babel weiterzugeben. Das Standardmodulsystem in Babel ist CommonJs, daher müssen wir keine Optionen an die Babel -Funktion senden.

<code>var babel = require('gulp-babel'),
    browserify = require('browserify'),
    source = require('vinyl-source-stream'),
    buffer = require('vinyl-buffer'),
    rename = require('gulp-rename'),
    uglify = require('gulp-uglify'),
    del = require('del');

gulp.task('clean-temp', function(){
  return del(['dest']);
});

gulp.task('es6-commonjs',['clean-temp'], function(){
  return gulp.src(['app/*.js','app/**/*.js'])
    .pipe(babel())
    .pipe(gulp.dest('dest/temp'));
});
</code>

Ich hoffe, hier gibt es nichts zu verwirrendes. Wir deklarieren eine Aufgabe namens ES6-Commonjs, die eine JavaScript-Datei in das App-Verzeichnis und alle Unterverzeichnisse erhält. Anschließend wird sie über Babel geleitet, was wiederum einzelne Dateien in ES5- und CommonJS -Module umwandelt und die konvertierten Dateien in den Ordner dest/temp kopiert. Die ES6-Commonjs-Aufgabe hat eine Abhängigkeit namens Clean-Temp, die das Dest-Verzeichnis und alle Dateien darin löscht, bevor die ES6-Commonjs-Aufgabe ausgeführt wird.

Wenn Sie den Code klarer machen und das Modulsystem angeben möchten, können Sie die Verwendung von Babel wie folgt ändern:

<code>.pipe(babel({
  modules:"common"
}))
</code>

Jetzt können wir eine einzelne Bundle -Datei aus diesen einzelnen Dateien erstellen, indem wir Browserify anwenden und die Ausgabe mithilfe des UGLIFY -Pakets komprimieren. Das folgende Code -Snippet zeigt dies:

<code>gulp.task('bundle-commonjs-clean', function(){
  return del(['es5/commonjs']);
});

gulp.task('commonjs-bundle',['bundle-commonjs-clean','es6-commonjs'], function(){
  return browserify(['dest/temp/bootstrap.js']).bundle()
    .pipe(source('app.js'))
    .pipe(buffer())
    .pipe(uglify())
    .pipe(rename('app.js'))
    .pipe(gulp.dest("es5/commonjs"));
});
</code>

Die obige Aufgabe hat zwei Abhängigkeiten: Die erste ist die Aufgabe, die das Bündel-Commonjs-CLANE-Aufgabe zu haben, das das ES5/CommonJS-Verzeichnis löscht. Nachdem diese Aufgaben ausgeführt wurden, stellt die Aufgabe die kombinierte und komprimierte Datei app.js in den Ordner ES5/CommonJS ein. Diese Datei kann direkt in index.html referenziert werden und die Seite kann im Browser angezeigt werden.

Schließlich können wir eine Aufgabe hinzufügen, um den Vorgang zu starten:

<code>gulp.task('commonjs', ['commonjs-bundle']);
</code>

in AMD

konvertieren AMD -System (🎜> Async Modul Definition), wie der Name schon sagt, ist ein asynchrones Modul -Ladesystem. Es ermöglicht es, mehrere abhängige Module parallel zu laden, und es wartet nicht, dass ein Modul vor dem Versuch, andere Module zu laden, vollständig geladen wird.

fordert.js ist eine Bibliothek, mit der AMD verarbeitet wird. Forderjs ist über bower erhältlich:

<code>bower install requirejs --save</code>

Wir benötigen auch das Gulp -Plugin von Request.js, um die Anwendung zu bündeln. Installieren Sie dazu das Gulp-RequireJS NPM-Paket.

<code>npm install gulp-requirejs --save-dev</code>

Jetzt müssen wir eine Aufgabe schreiben, die ES6 -Code in ES5 und AMD umwandelt und ihn dann mit Anforderungen bündelt. Diese Aufgaben sind den im Abschnitt CommonJS erstellten Aufgaben sehr ähnlich.

<code>var requirejs = require('gulp-requirejs');

gulp.task('es6-amd',['clean-temp'], function(){
    return gulp.src(['app/*.js','app/**/*.js'])
    .pipe(babel({ modules:"amd" }))
    .pipe(gulp.dest('dest/temp'));
});

gulp.task('bundle-amd-clean', function(){
  return del(['es5/amd']);
});

gulp.task('amd-bundle',['bundle-amd-clean','es6-amd'], function(){
  return requirejs({
    name: 'bootstrap',
    baseUrl: 'dest/temp',
    out: 'app.js'
  })
  .pipe(uglify())
  .pipe(gulp.dest("es5/amd"));
});

gulp.task('amd', ['amd-bundle']);
</code>

Um das endgültige Skript auf der Seite index.html zu verwenden, müssen wir einen Verweis auf die RequiredJS, das generierte Skript, hinzufügen und dann das Bootstrap -Modul laden. Die Datei bootstrap.js im App -Ordner startet die AngularJS -Anwendung, sodass wir sie laden müssen, um die AngularJS -Anwendung zu starten.

<code> src="bower_components/requirejs/require.js" >>
 src="es5/amd/app.js">>
>
  (function(){
    require(['bootstrap']);
  }());
>
</code>

Schlussfolgerung

Module sind ein Merkmal, das JavaScript seit langem fehlte. Sie werden in ES6 erscheinen, aber leider ist ihre derzeitige Unterstützung für einheimische Browser schlecht. Das heißt aber nicht, dass Sie sie heute nicht benutzen können. In diesem Tutorial zeige ich, wie ES6 -Module in CommonJs und AMD -Formate umwandeln, die mit Gulp, Babel und verschiedenen Plugins im Browser ausgeführt werden können.

Wie für ES6? Seit seiner Veröffentlichung hat ES6 in der Gemeinschaft viel Aufmerksamkeit gewonnen. Es wurde von JavaScript-Plug-Ins verwendet, darunter Bootstrap, Aurelia, Angular 2 und viele andere JavaScript-Bibliotheken oder Frameworks. TypeScript fügt auch einige ES6 -Funktionen, einschließlich Modulen, Unterstützung hinzu. Das Lernen und die Verwendung des heutigen ES6 reduzieren die Anstrengungen, die in Zukunft erforderlich sind, um Code zu konvertieren.

FAQs (FAQs) zum Übersetzen von ES6 -Modulen in AMD und CommonJs mit Babel und Schlucken

Was ist der Zweck der Verwendung von Babel und Gulp, um ES6 -Module in AMD und CommonJs zu übersetzen?

Babel und Gulp, um ES6 -Module in AMD und CommonJS zu übersetzen, ist ein Prozess, mit dem Entwickler Code mit der neuesten Version von JavaScript (ES6) schreiben können, und es dann in eine Version umwandeln, die verschiedene JavaScript -Motoren verstehen können. Dies ist besonders nützlich, da nicht alle Browser oder Umgebungen die neuesten ES6 -Funktionen unterstützen. Durch die Übersetzung des Code können Entwickler sicherstellen, dass ihre Anwendungen auf verschiedenen Plattformen reibungslos ausgeführt werden.

Wie hilft Babel, ES6 -Module zu übersetzen?

Babel ist ein JavaScript-Compiler, der hauptsächlich zum Umwandeln von ECMAScript 2015 (ES6) -Codes in rückwärtskompatible JavaScript-Versionen, die von älteren JavaScript-Motoren ausgeführt werden können. Babel übersetzt ES6-Module und bietet Plugins wie "Babel-Plugin-Transform-Module-Commonjs", die die ES6-Modulsyntax in die weit verbreitete CommonJS-Syntax umwandeln.

Welche Rolle spielt Gulp im Übersetzungsprozess?

gulp ist ein Task -Läufer, mit dem der Übersetzungsprozess automatisiert werden kann. Es kann konfiguriert werden, um Änderungen in einer ES6 -Datei zu überwachen und den Babel -Übersetzer automatisch darauf auszuführen. Auf diese Weise können Entwickler den Übersetzer jedes Mal, wenn er den Code ändern, manuell ausführen.

Kann ich das ES6 -Modul in AMD anstelle von CommonJs übersetzen?

Ja, Sie können ES6 -Module in asynchrone Moduldefinitionen (AMD) anstelle von CommonJs übersetzen. Babel bietet zu diesem Zweck ein Plugin mit dem Namen "Babel-Plugin-Transform-Modules-AMD". AMD ist besonders nützlich, wenn es sich um eine große Anzahl von Modulen in einer Webbrowser -Umgebung handelt.

Was ist der Unterschied zwischen AMD und CommonJs?

AMD und CommonJs sind beide Modulformate. Der Hauptunterschied zwischen ihnen besteht darin, wie sie mit Abhängigkeiten umgehen. AMD unterstützt die asynchrone Belastung von Abhängigkeiten, die die Leistung in Browserumgebungen verbessern können. CommonJs hingegen lädt Abhängigkeiten synchron, was einfacher ist und in Serverumgebungen wie Node.js.

Wie kann ich die zu übersetzende ES6 -Funktion angeben?

Babel Verwenden Sie eine Konfigurationsdatei mit dem Namen .babelRC (oder babel.config.js), in dem Sie die zu übersetzende ES6 -Funktionen angeben können. Sie können die Plugins oder Voreinstellungen in dieser Datei auflisten. Um beispielsweise ein ES6-Modul zu übersetzen, werden in der Konfiguration "Babel-Plugin-Transform-Modul-Commonjs" oder "Babel-Plugin-Transform-Modules-AMD" oder "Babel-Plugin-Transform-Modules-AMD" enthalten.

Was sind die Vorteile der Verwendung von ES6 -Modulen?

ES6 -Module bringen der JavaScript -Entwicklung viele Vorteile. Sie führen eine Standardsyntax zum Importieren und Exportieren von Funktionen, Objekten oder Werten aus Modulen ein, die Ihren Code organisierter und verwaltbarer machen können. Sie unterstützen auch die statische Analyse, die die Leistung verbessert und Fehler zur Kompilierzeit und nicht zur Laufzeit erfasst.

Wie kann der übersetzte Code debuggen?

Debugging Übersetzter Code kann eine Herausforderung sein, da sich der ausgeführte Code von dem von Ihnen geschriebenen Code unterscheidet. Babel bietet jedoch eine Lösung für dieses Problem durch die Form der Quellzuordnung. Eine Quellkarte ist eine Datei, die den übersetzten Code auf den ursprünglichen Quellcode zurückbildert, sodass Sie den Code debuggen, sobald er den ursprünglichen ES6 -Code ausführt.

Kann ich Babel und Schluck mit anderen JavaScript -Frameworks verwenden?

Ja, Babel und Gulp sind nicht an ein bestimmtes JavaScript -Framework gebunden. Sie können mit jedem ES6-fähigen Framework verwendet werden, einschließlich React, Angular, Vue.js und mehr.

Gibt es Alternativen zu Babel und Schluck zur Übersetzung von ES6 -Modulen?

Ja, es gibt mehrere Alternativen für Babel und Gulp, die zur Übersetzung von ES6 -Modulen verwendet werden können. Dazu gehören TypeScript, Traceur und Rollup. Diese Tools haben jeweils ihre Vor- und Nachteile, daher hängt die beste Wahl von Ihren spezifischen Bedürfnissen und Vorlieben ab.

Das obige ist der detaillierte Inhalt vonUmzug ES6 -Module in AMD & CommonJs mit Babel & Gulp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!