Dieser Beitrag ist Teil einer Serie von ES2015-Beiträgen. In den kommenden zwei Monaten werden wir jede Woche über neue JavaScript-Funktionen berichten.
Nachdem sich die ES2015-Spezifikation (früher bekannt als ECMAScript 6 oder kurz ES6) lange Zeit im Stadium des Arbeitsentwurfs befand, hat sie vor einiger Zeit einen endgültigen Stand erreicht. Für Entwickler, die bereits ES2015-Funktionen in ihren Projekten nutzen möchten, steht seit langem
Webpack
Einführung
Webpack ist ein Javascript-Modul-Builder und Modul-Loader. Mit Webpack können Sie eine Vielzahl verschiedener Module (AMD, CommonJS, ES2015, ...) mit ihren Abhängigkeiten in statische Dateibündel packen. Webpack stellt Ihnen Lader zur Verfügung, mit denen Sie Ihre Quelldateien im Wesentlichen vorverarbeiten können, bevor Sie sie anfordern oder laden. Wenn Sie mit Tools wie Grunt oder Gulp vertraut sind, können Sie sich Loader als Aufgaben vorstellen, die vor dem Bündeln der Quellen ausgeführt werden. Um Ihnen das Leben noch leichter zu machen, enthält Webpack auch einen Entwicklungsserver mit Unterstützung für Dateiüberwachung und Browser-Nachladen.
Installation
Um Webpack zu verwenden, benötigen Sie lediglich npm, den Node Package Manager, den Sie entweder von Node oder io.js herunterladen können. Sobald Sie npm installiert haben, müssen Sie Webpack nur noch mit npm global installieren:
npm install -g webpack
Alternativ können Sie es mit dem folgenden Befehl einfach in die von Ihnen gewünschten Projekte einbinden:
npm install --save-dev webpack
Babel
Einführung
Mit Babel, einem Javascript-Transpiler, können Sie Ihren Code mit ES2015 (und sogar einigen ES7-Funktionen) schreiben und ihn in ES5 konvertieren, so dass bekannte Browser ihn interpretieren können. Auf der Babel-Website finden Sie eine Liste der unterstützten Funktionen und wie Sie diese heute in Ihrem Projekt verwenden können. Für die React-Entwickler unter uns bietet Babel auch standardmäßig JSX-Unterstützung. Alternativ dazu gibt es den Google Traceur Compiler, der im Wesentlichen das gleiche Problem wie Babel löst. Es gibt mehrere Webpack-Loader für Traceur, von denen traceur-loader der beliebteste zu sein scheint.
Installation
Vorausgesetzt, Sie haben npm bereits installiert, ist die Installation von Babel so einfach wie die Ausführung:
npm install --save-dev babel-loader
Dieser Befehl fügt babel-loader der package.json Ihres Projekts hinzu. Führen Sie den folgenden Befehl aus, wenn Sie ihn lieber global installieren möchten:
npm install -g babel-loader
Struktur des Projekts
webpack-babel-integration-beispiel/ src/ DateTime.js Begrüßung.js main.js index.html paket.json webpack.config.js
Die Konfiguration von Webpack finden Sie im Stammverzeichnis des Projekts unter dem Namen webpack.config.js. Die ES6-Javascript-Quellen, die ich nach ES5 transpilieren möchte, befinden sich im Ordner src/.
Webpack-Konfiguration
Die erforderliche Webpack-Konfigurationsdatei ist eine sehr einfache Konfiguration mit einigen wenigen Aspekten:
- mein Hauptquelleneintrag
- den Ausgabepfad und den Bundle-Namen
- die Entwicklungswerkzeuge, die ich verwenden möchte
- eine Liste von Modulladern, die ich auf meinen Quellcode anwenden möchte
[javascript] var path = require('path'); module.exports = { Eintrag: './src/main.js', Ausgabe: { Pfad: path.join(dirname, 'build'), filename: 'bundle.js' }, devtool: 'inline-source-map', module: { loaders: [ { test: path.join(dirname, 'src'), Lader: 'babel-loader' } ] } }; [/javascript] Das obige Snippet zeigt Ihnen, dass mein Quelleintrag auf src/main.js eingestellt ist, die Ausgabe so eingestellt ist, dass eine build/bundle.js erstellt wird, ich möchte, dass Webpack Inline-Source-Maps erzeugt und ich möchte den babel-loader für alle Dateien in src/ ausführen.
ES6-Quellen
Eine einfache ES6-Klasse
Greeting.js enthält eine einfache Klasse, in der nur die Methode toString implementiert ist, die einen String zur Begrüßung des Benutzers zurückgibt:
[javascript]
class Greeting {
toString() {
return 'Hallo Besucher';
}
}
export default Greeting
[/javascript]
Verwendung von Paketen in Ihrem ES2015-Code
Oft genug verlassen Sie sich auf eine Reihe von verschiedenen Paketen, die Sie mit npm in Ihr Projekt einbinden. In meinem Beispiel verwende ich die beliebte Datums-Zeit-Bibliothek Moment.js. In diesem Beispiel verwende ich Moment.js, um dem Benutzer das aktuelle Datum und die Uhrzeit anzuzeigen.
Führen Sie den folgenden Befehl aus, um Moment.js als lokale Abhängigkeit in Ihrem Projekt zu installieren:
npm install --save-dev moment
Ich habe die Klasse DateTime.js erstellt, die wiederum nur die Methode toString implementiert, um das aktuelle Datum und die Uhrzeit im Standard-Datumsformat zurückzugeben.
[javascript]
import moment from 'moment';
class DateTime {
toString() {
return 'Die aktuelle Datumszeit ist: ' + moment().format();
}
}
export default DateTime
[/javascript]
Nachdem Sie das Paket mit der import-Anweisung importiert haben, können Sie es überall in der Quelldatei verwenden.
Ihr Haupteintrag
In der Webpack-Konfiguration habe ich eine Datei src/main.js als Quelleneintrag angegeben. In dieser Datei importiere ich einfach beide von mir erstellten Klassen, ziele auf verschiedene DOM-Elemente ab und gebe die toString -Implementierungen aus beiden Klassen in diese DOM-Objekte aus.
[javascript]
import Greeting from './Greeting.js';
import DateTime from './DateTime.js';
var h1 = document.querySelector('h1');
h1.textContent = new Greeting();
var h2 = document.querySelector('h2');
h2.textContent = new DateTime();
[/javascript]
HTML
Nachdem ich meine ES2015-Quellen eingerichtet habe, die die Begrüßung in einem h1-Tag und die aktuelle Datumszeit in einem h2-Tag anzeigen, ist es an der Zeit, meine index.html einzurichten. Da es sich um eine einfache HTML-Datei handelt, ist das Einzige, was wirklich wichtig ist, dass Sie das Skript-Tag auf die transpilierte Bundle-Datei verweisen, in diesem Beispiel also auf build/bundle.js. [html] <!DOCTYPE html> <html lang="en"> <Kopf> <meta charset="UTF-8"> <title>Beispiel für die Integration von Webpack und Babel</title> </head> <Körper> <h1></h1> <h2></h2> <script src="build/bundle.js"></script> </body> </html> [/html]
Ausführen der Anwendung
In diesem Beispielprojekt ist die Ausführung meiner Anwendung so einfach wie das Öffnen der index.html in Ihrem Lieblingsbrowser. Zuvor müssen Sie jedoch Webpack anweisen, die Loader tatsächlich auszuführen und so Ihre Quellen in die webpack --watch
Wenn Sie mein Beispielprojekt von Github (Link unten) verwenden, können Sie auch das folgende Skript verwenden, das ich in der package.json eingerichtet habe:
npm run watch
Leichtere Fehlersuche mit Source Maps
Das Debuggen von transpiliertem ES5 ist eine große Qual, die Sie dazu verleitet, ohne nachzudenken wieder ES5 zu schreiben. Um die Entwicklung und das Debugging von ES2015 zu erleichtern, kann ich mich auf die von Webpack generierten Source Maps verlassen. Wenn Sie Webpack (normal oder im Überwachungsmodus) mit der devtool-Eigenschaft inline-source-map ausführen, können Sie die ES2015-Quelldateien anzeigen und mit den Entwicklungswerkzeugen Ihres Browsers Haltepunkte darin setzen.
Ausführen des Beispielprojekts mit einem Haltepunkt innerhalb der Methode DateTime.js toString unter Verwendung der Chrome-Entwicklerwerkzeuge.
Fazit
Wie Sie soeben gesehen haben, ist die Einrichtung all dessen, was Sie für den Start mit ES2015 benötigen, extrem einfach. Webpack ist ein großartiges Dienstprogramm, mit dem Sie ganz einfach Ihre komplette Front-End-Build-Pipeline einrichten können und das sich nahtlos in Babel integrieren lässt, um die Code-Transpilierung in die Build-Pipeline einzubeziehen. Mit Hilfe von Source Maps wird sogar das Debuggen wieder einfach.
Beispielprojekt
Das gesamte Beispielprojekt, das oben vorgestellt wurde, finden Sie auf Github.
Verfasst von
Marc Rooding
Unsere Ideen
Weitere Blogs
Contact