Transpiling ES6

Während die Unterstützung für ES6 ständig zunimmt, können wir nicht immer davon ausgehen, dass Benutzer einen Browser verwenden, der alle seine Funktionen unterstützt. Um ES6-Funktionen jetzt nutzen zu können und sicherzustellen, dass wir keine browserübergreifenden Kompatibilitätsprobleme haben, müssen wir unseren Code transpilieren.

Betrachten wir zwei mögliche Wege, wie wir unseren Code transpilieren können. Zuerst verwenden wir npm-Skripte und Babel. Zweitens sehen wir uns die Verwendung von Gulp mit Babel an.

Babel

Babel ist der Standard-Transpiler für ES6. Er hieß ursprünglich 6to5, wurde aber später in Babel umbenannt, da klar war, dass der Name in Zukunft nicht funktionieren würde. Mit der Veröffentlichung von Babel 6 konzentrierte sich Babel zunehmend auf die Modularität. Es wurde ein System geschaffen, das es Ihnen ermöglicht, Plugins zur Transformation Ihres Codes zu erstellen! Die Standardaktion von Babel in Version 6 ist nicht mehr, ES6 in ES5 zu transpilieren, sodass Sie nun verschiedene Presets einbinden müssen.

Die Presets in Babel ermöglichen es Ihnen, die gewünschten Transformationen auszuwählen oder das Preset babel-preset-es2015 auszuwählen und mit allen Funktionen zu arbeiten.

Babel CLI

Um mit den drei Methoden zu arbeiten, die wir uns ansehen werden, ist es wichtig sicherzustellen, dass Node.js installiert ist. Der einfachste Weg ist, die Node.js-Website zu besuchen und die neueste Version für Ihr Betriebssystem herunterzuladen.

Wenn alles nach Plan verläuft, sollten Sie node in Ihrem Terminal zur Verfügung haben. Um zu bestätigen, dass Node.js auf Ihrem System installiert ist, öffnen Sie Ihr Terminal und geben Sie node -v in die Eingabeaufforderung ein.

$ node -v
v5.2.0

Wenn Sie eine Antwort erhalten, die der oben gezeigten ähnelt, sind Sie bereit! Wenn Sie mit der Kommandozeile nicht sehr vertraut sind, empfehle ich Ihnen, commandlinepoweruser.com von Wes Bos zu besuchen. Es ist eine großartige kostenlose Videoserie, die Ihnen hilft, schnell mit den gängigen Befehlen zurechtzukommen.

Sobald Node.js läuft, müssen wir die Babel CLI installieren. Dazu verwenden wir npm. Um dies zu testen, erstellen Sie einen Projektordner und navigieren Sie dort im Terminal hin. Um zu beginnen, müssen wir eine Datei `package.json` erstellen. Um dies mit npm zu starten, können wir ausführen

npm init

Dies führt Sie durch einige Fragen: Wie heißt Ihr Projekt, Version, Beschreibung usw. Wenn Sie nach dem "Einstiegspunkt" gefragt werden, können Sie diesen vorerst auf `index.js` belassen. Dies ist normalerweise die Hauptdatei Ihres Projekts. Wenn Sie im Voraus wissen, wie diese Datei heißen wird, fügen Sie sie jetzt hinzu.

Sobald Sie diese Schritte abgeschlossen haben, wird eine neue Datei `package.json` erstellt. Nun ist es an der Zeit, das benötigte Babel-Paket zu installieren.

npm install --save-dev babel-cli

Nachdem Sie diese Zeile ausgeführt haben, sehen Sie einige neue Änderungen in Ihrem Projektverzeichnis. Erstens werden Sie feststellen, dass es nun einen Ordner `node_modules` gibt, und zweitens, dass es einen neuen Eintrag in Ihrer `package.json`-Datei gibt. Ein wichtiger Teil des obigen Codes ist das Flag --save-dev. Dieses Flag speichert das Modul babel-cli in Ihrer `package.json`-Datei im Abschnitt devDependencies.

"devDependencies": {
  "babel-cli": "^6.6.5"
},

Dieser Abschnitt in der Datei wird für Module verwendet, die in der Entwicklung verwendet werden, d. h. sie werden in der Produktion nicht benötigt. Wenn wir die Installation mit --save stattdessen ausgeführt hätten, würde das Modul im Abschnitt dependencies platziert.

Aber was ist der Sinn all dieser Abschnitte? Wenn Sie mit npm und der Datei `package.json` nicht vertraut sind, ist es eine Datei, die Sie von Projekt zu Projekt mitnehmen und `npm install` ausführen können, und alles, was in devDependencies oder dependencies aufgeführt ist, wird für dieses Projekt installiert. Wenn Sie nur die Abhängigkeiten installieren möchten, könnten Sie ausführen

npm install --production

Es wird Fälle geben, in denen Sie bei der Entwicklung Ihrer Apps bestimmte Module ausschließlich für die Entwicklung und bestimmte Module ausschließlich für die Produktion verwenden möchten. Mit --save und --save-dev können Sie diese Module in die richtigen Kategorien einordnen.

Babel Presets

Wie bereits erwähnt, transpilert Babel ES6 nicht standardmäßig. Wir müssen auch das Modul babel-preset-es2015 einbinden.

npm install --save-dev babel-preset-es2015

Dieses Modul stellt sicher, dass wir unseren Code transpilieren können.

Ordnerstruktur

Bevor wir zu weit gehen, sprechen wir über die Ordnerstruktur. Wenn Sie folgen möchten, habe ich meine Ordnerstruktur wie folgt eingerichtet

- project
    - src
      - app.js
    - public
    - package.json

Im Stammordner `project` habe ich einen Ordner `src` und einen Ordner `public`. Der Ordner `src` wird verwendet, um meinen vorab transpilierenten Code zu speichern. Dies wäre der Code, der mit der schönen ES6-Syntax geschrieben ist, während der Ordner `public` das Ziel für unseren transpilierenten Code sein wird. Der Ordner `public` würde auch die CSS-, HTML- und Bilddateien enthalten, die Ihre App benötigt.

NPM-Skript

Die erste Methode des Transpilierens, die wir uns ansehen werden, ist die Verwendung von NPM zum Ausführen von Babel. In der Datei `package.json` gibt es einen Abschnitt namens scripts, in dem wir Befehle definieren können, die wir ausführen möchten. Mit der Babel CLI können wir ein Skript einrichten, um unseren Code zu kompilieren und ihn dort auszugeben, wo wir ihn haben möchten. Der Abschnitt scripts nimmt ein JSON-Objekt als Wert. Die Schlüssel in diesem Objekt sind der Name unseres Skripts und der Wert ist der auszuführende Befehl.

"scripts": {
  "js" : "babel src/app.js --out-file public/app.js"
}

Wenn wir das Obige zu unserer package.json im Abschnitt scripts hinzufügen, wird unser Code von src/app.js genommen, durch Babel ausgeführt und die Datei in public/app.js ausgegeben. Der Babel-Befehl hat viele Optionen, die wir später besprechen werden, aber das Flag --out-file wird verwendet, um das Ziel der kompilierten Quelle zu bestimmen.

Fügen Sie nun etwas ES6-Code zur Datei `src/app.js` hinzu. Wenn Sie nicht wissen, was Sie hinzufügen sollen, versuchen Sie Folgendes

const person = {
  name: 'Ryan Christiani'
};

const testString = `My name is ${person.name}`;

Wenn Sie npm run js in Ihr Terminal eingeben, sollten Sie eine Ausgabe wie diese erhalten

> [email protected] js /Users/yourusername/path/to/project
> babel ./src/app.js --out-file ./public/app.js

Nun, der Moment der Wahrheit: schauen wir in die Datei `public/app.js`. Beachten Sie, dass Babel sie erstellt, wenn Sie sie zuvor nicht erstellt haben.

const person = {
  name: 'Ryan Christiani'
};

const testString = `My name is ${person.name}`;

Hm... das sieht genau gleich aus. Das liegt daran, dass wir das Preset es2015 noch nicht verwendet haben!

babelrc

Um Babel mitzuteilen, dass wir die heruntergeladenen Presets verwenden möchten, müssen wir eine Konfigurationsdatei erstellen. Diese Datei heißt `.babelrc`. Wenn Sie noch nie mit einer Dot-Datei gearbeitet haben, finden Sie sie vielleicht etwas seltsam! Dot-Dateien sind dazu bestimmt, versteckte Dateien zu sein und werden typischerweise verwendet, um Konfigurationsinformationen zu speichern oder einfach Dinge zu verbergen. Standardmäßig können Sie Dot-Dateien auf Ihrem Computer nicht sehen, aber eine schnelle Google-Suche zeigt Ihnen, wie Sie sie für Ihren Finder einschalten können. Da wir uns im Terminal befinden, können wir den Befehl ls -a verwenden, um jede Datei oder jeden Ordner anzuzeigen, der mit einem `.` beginnt.

Sublime Text (der Editor, den ich in diesem Buch verwende) oder Atom zeigen Ihnen diese Dateien an, wenn Sie Ihren Projektordner im Editor öffnen.

Um Babel für die Verwendung unseres Presets zu konfigurieren, müssen wir diesen Code in die `.babelrc`-Datei einfügen.

{ 
  "presets": ["es2015"] 
}

Babel-Konfigurationsdateien akzeptieren ein JSON-Objekt mit einem Schlüssel presets, der ein Array der zu verwendenden Presets enthält. Es gibt viele Presets, die Sie verwenden können. Weitere Informationen finden Sie in der Babel-Dokumentation. Wenn Sie nun npm run js ausführen, wird unser Code ordnungsgemäß transpiliert und die Ausgabe sieht dann so aus

'use strict';

var person = {
  name: 'Ryan Christiani'
};

var testString = 'My name is ' + person.name;

Das ist großartig, aber machen wir unser Skript etwas robuster. Im Moment wird die Datei nach dem Ausführen des Skripts ausgegeben und gestoppt. Wenn wir weiter an der Datei arbeiten möchten, müssen wir sie immer wieder ausführen. Wir können das Skript so konfigurieren, dass es die Dateien überwacht und ausgeführt wird, wenn sie sich ändern!

"scripts": {
  "js": "babel ./src/app.js --watch --out-file ./public/app.js"
}

Durch Hinzufügen des Flags --watch teilen wir Babel mit, auf Änderungen in der Datei `src/app.js` zu achten, und wenn Änderungen vorgenommen werden, möchten wir eine transpilierte Version dieses Codes nach `public/app.js` ausgeben. Es gibt noch viele weitere Dinge, die Sie mit npm-Skripten und der Babel CLI machen können. Lassen Sie uns nun sehen, wie wir Gulp und Babel verwenden können, um unseren Code zu transpilieren!

Gulp

Gulp ist ein beliebter Task-Runner, der zur Automatisierung Ihres Workflows beiträgt. Es gibt eine Vielzahl von Task-Runnern, darunter Grunt, Broccoli und Brunch. In diesem Buch sehen wir uns an, wie Gulp konfiguriert wird, um mit Babel zu arbeiten, und später im Buch werden wir dies auch zur Arbeit mit Modulen verwenden. Fangen wir also an!

Erste Schritte mit Gulp

Um mit Gulp zu beginnen, müssen wir es global auf unserem System installieren. Gulp ist ein weiteres npm-Modul, das wir wie folgt installieren: npm install --global gulp-cli. Bei der Arbeit mit Gulp müssen wir es nur einmal global und außerdem lokal in jedem neuen Projekt installieren. Dies können wir durch Ausführen von: npm install --save-dev gulp tun.

gulpfile.js

Um Gulp zu konfigurieren, müssen wir zunächst eine neue Datei namens `gulpfile.js` erstellen. Diese wird zur Definition unserer Aufgaben verwendet. Wenn Sie noch nie mit Node gearbeitet haben, sind Sie vielleicht nicht mit der Funktion require vertraut. Dies ist eine Funktion, die alle Module aus dem Ordner node_modules oder Ihre eigenen Module abruft. Da wir npm install --save-dev gulp ausgeführt haben, wurde es in unserem Ordner node_modules platziert. In der `gulpfile.js` können wir durch require auf gulp zugreifen.

const gulp = require('gulp');

Dies speichert Gulp in einer neuen Variable namens gulp. Sie werden feststellen, dass ich hier const verwendet habe! Diese `gulpfile.js` wird unsere erste JavaScript-Datei sein, die ES6 verwendet. Ich werde hier nicht auf die ES6-Funktionen, die wir verwenden, im Detail eingehen, dafür ist dieses Buch da! Wir werden diese Funktionen später im Buch ausführlicher besprechen.

Gulp dreht sich alles um Aufgaben. Wir werden damit beginnen, einige einfache Aufgaben in dieser Datei zu definieren.

const gulp = require('gulp');

gulp.task('js', () => {

});

gulp.task('default', () => {

});

Das obige () => ist die Syntax für eine ES6-Pfeilfunktion. Machen Sie sich keine Sorgen, wenn Sie damit nicht vertraut sind, wir werden es später besprechen.

Die beiden erstellten Aufgaben werden zusammenarbeiten und auch separat, wenn wir möchten. Die erste der Aufgaben ist eine, die wir js nennen werden (beachten Sie, dass Sie eine Aufgabe beliebig benennen können, mit Ausnahme von default). Die Aufgabe js kümmert sich darum, unser JS zu nehmen und es durch Babel zu jagen. Um diese Aufgabe auszuführen, können wir gulp js in unserem Terminal ausführen. Natürlich müssen wir zuerst die Aufgabe definieren.

Die zweite Aufgabe heißt default. Dies ist eine spezielle Aufgabe: Hier können wir Code einrichten, der viele andere Aufgaben startet oder in unserem Fall einen Listener erstellt, wenn sich bestimmte Dateien ändern. Um diese Aufgabe auszuführen, können wir einfach gulp im Terminal eingeben. Gulp weiß, dass es die Aufgabe default ausführt, wenn es nur gulp sieht.

Die js-Aufgabe

Bevor wir beginnen, müssen wir ein Modul installieren, das es Babel ermöglicht, mit Gulp zu arbeiten. Seltsamerweise heißt dieses Modul gulp-babel. Geben Sie npm install --save-dev gulp-babel in Ihr Terminal ein, um mit dem Herunterladen des Pakets gulp-babel zu beginnen.

Fügen wir in unserer Gulp-Datei diese Zeilen hinzu

const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('js', () => {
    return gulp.src('./src/app.js')
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(gulp.dest('./public'));
});

gulp.task('default', () => {

});

Als Erstes rufen wir gulp-babel ab und geben dann in unserer js-Aufgabe gulp.src('./src/app.js') zurück. Wir geben dies zurück, um Gulp mitzuteilen, dass es sich um ein asynchrones Ereignis handelt. Die Methode .src ermöglicht es uns, den Pfad für unsere Datei festzulegen, und in diesem Fall handelt es sich um eine einzelne Datei. Wenn wir zum Modulteil dieses Buches kommen, werden wir dies etwas robuster gestalten. Gulp arbeitet mit Streams, was bedeutet, dass wir die Daten weiterleiten können. Mit der Methode .pipe nehmen wir also die Quelldateien und leiten sie durch Babel.

Wie schon zuvor müssen wir die gewünschten Presets angeben. Dazu können wir ein Objekt an die Babel-Funktion übergeben, um dem Babel-Plugin mitzuteilen, welches Preset wir verwenden möchten. Unsere Quelle wird in browserfertigen Code umgewandelt und weitergeleitet, sodass wir sie in gulp.dest leiten können, was das endgültige Ziel festlegt.

Nachdem unsere Aufgabe abgeschlossen ist, sollte die Ausführung von gulp js im Terminal diese Ausgabe erzeugen!

[19:50:35] Using gulpfile ~/Sites/lets-learn/book/testfiles/gulpfile.js
[19:50:35] Starting 'js'...
[19:50:35] Finished 'js' after 102 ms

Wenn Sie keine Fehler haben, sollte alles in Ordnung sein. Gulp wurde ausgeführt, hat Ihre `app.js` aus dem `src`-Ordner genommen, sie transformiert und im `public`-Ordner gespeichert.

Sie haben vielleicht bemerkt, dass dies nur einmal ausgeführt wurde. Wenn wir etwas Code ändern, müssen wir ihn erneut ausführen. Lassen Sie uns die Möglichkeit einrichten, dass Gulp unsere Dateien weiterhin überwacht.

gulp.task('default', ['js'],() => {
    gulp.watch('src/app.js',['js']);
});

Indem wir der Aufgabe default ein zusätzliches Argument, ein Array, für die Aufgaben hinzufügen, die wir beim ersten Aufruf der Aufgabe ausführen möchten. Die Methode gulp.watch benötigt einige Argumente: einen Dateipfad, der auf Dateiänderungen wartet, und ein Array der auszuführenden Aufgaben. Jetzt können wir einfach gulp ausführen.

$ gulp
[21:26:50] Using gulpfile ~/Sites/lets-learn/book/testfiles/gulpfile.js
[21:26:50] Starting 'js'...
[21:26:50] Finished 'js' after 102 ms
[21:26:50] Starting 'default'...
[21:26:50] Finished 'default' after 6.73 ms

Wenn Sie Ihre Datei `src/app.js` ändern, wird die Aufgabe js erneut ausgeführt! Hoffentlich hilft Ihnen dies dabei, schnell loszulegen, damit Sie ES6 noch heute nutzen können, auch wenn die Browser, die Sie unterstützen müssen, nicht die von Ihnen gewünschten Funktionen unterstützen.

---