A Beginner’s Guide to Babel

Dieser Artikel stellt Babel vor, einen JavaScript-Compiler, mit dem Entwickler heute JavaScript der nächsten Generation verwenden können.

Beim Erstellen von Webanwendungen kann es frustrierend sein, JavaScript zu schreiben. Wir müssen darüber nachdenken, welche Funktionen in den Browsern verfügbar sind, auf die wir abzielen, und was passiert, wenn eine Funktion nicht implementiert wird. Einige Leute würden empfehlen, es einfach nicht zu benutzen, was meistens eine schmerzhafte Erfahrung ist, wenn wir etwas Kompliziertes bauen.

Zum Glück können wir uns mit einigen Tools keine Gedanken mehr darüber machen, was unterstützt wird, und einfach den besten Code schreiben, den wir können. Sie werden Transpiler genannt. Ein Transpiler ist ein Tool, das Quellcode als Eingabe verwendet und neuen Quellcode als Ausgabe erzeugt, mit einer anderen Syntax, aber semantisch so nah wie möglich — oder idealerweise gleichwertig — am Original.

Babel ist so ziemlich der Standardtranspiler, um modernes JavaScript (ES2015+) in kompatible Implementierungen zu übersetzen, die in alten Browsern ausgeführt werden. Es ist die perfekte Lösung, wenn Sie sich nur auf das Schreiben von JavaScript konzentrieren möchten.

Und obwohl das Hauptziel von Babel darin besteht, die neuesten Standards von ECMAScript (ES) für alte — oder manchmal aktuelle — Browser zu übersetzen, kann es mehr. Es gibt ein Ökosystem von Voreinstellungen und Plugins, die auch das Hinzufügen von nicht standardmäßigen Funktionen ermöglichen. Jedes Plugin stellt eine neue Funktion / Transformation für Ihren Code zur Verfügung, und Voreinstellungen sind nur eine Sammlung von Plugins.

Erste Schritte

Abhängig von Ihrem Projekt und den verwendeten Tools gibt es verschiedene Möglichkeiten, Babel einzurichten. In diesem Artikel werden wir erklären, wie Sie Babel mit der CLI einrichten, obwohl Sie, wenn Sie ein Build-System oder Framework verwenden, spezifische Anweisungen auf der offiziellen Website lesen können. Die meiste Zeit ist die CLI der schnellste und einfachste Weg, um loszulegen.

Der erste Schritt zum Einrichten von Babel in einem Projekt besteht darin, das Paket mit npm zu installieren und als Dev-Abhängigkeit hinzuzufügen. Angenommen, Sie haben einen funktionierenden Knoten.js-Umgebung bereits vorhanden, es geht nur darum, Folgendes in Ihrem Terminal auszuführen:

mkdir babel-testcd babel-testnpm init -ynpm install --save-dev babel-cli

Dadurch wird ein Verzeichnis (babel-test) erstellt, das in das Verzeichnis wechselt, ein npm-Projekt initialisiert (wodurch eine package.json -Datei erstellt wird) und dann die babel-cli als Dev-Abhängigkeit installiert.

Wenn Sie Hilfe zu den oben genannten Themen benötigen, lesen Sie bitte unsere Tutorials zur Installation von Node und zur Arbeit mit npm.

Als nächstes können wir package.json öffnen und unseren npm-Skripten einen build -Befehl hinzufügen:

"scripts": { "build": "babel src -d dist"}

Dadurch werden die Quelldateien aus dem Verzeichnis src übernommen und das Ergebnis in einem Verzeichnis dist ausgegeben. Dann können wir es ausführen als:

npm run build

Aber warte! Bevor wir Babel ausführen, müssen wir die Plugins installieren und einrichten, die unseren Code transformieren. Der einfachste und schnellste Weg, dies zu tun, ist das Hinzufügen der Env-Voreinstellung, die die entsprechenden Plugins abhängig von den von Ihnen angegebenen Zielbrowsern auswählt. Es kann installiert werden mit:

npm install babel-preset-env --save-dev

Erstellen Sie dann eine .babelrc -Datei im Stammverzeichnis Ihres Projekts und fügen Sie die Voreinstellung hinzu:

{ "presets": }

Die .babelrc -Datei ist der Ort, an dem Sie alle Ihre Einstellungen für Babel vornehmen. Sie werden dies hauptsächlich zum Einrichten von Voreinstellungen und Plugins verwenden, aber es stehen noch viel mehr Optionen zur Verfügung. Sie können die vollständige Liste auf der Babel API-Seite überprüfen.

Bitte beachten Sie, dass Dateien, die mit einem Punkt beginnen, je nach Betriebssystem standardmäßig ausgeblendet werden. Wenn dies für Sie problematisch ist (oder wenn Sie nur weniger Dateien bevorzugen), können Sie Ihre Babel-Einstellungen in der package.json -Datei unter einem babel -Schlüssel wie folgt ablegen:

{ "name": "babel-test", "version": "1.0.0", "babel": { // config }}

Zum Schluss erstellen wir die Verzeichnisse und Dateien, die Babel erwartet:

mkdir src dist

Und gib ihm etwas zu verwandeln:

let a = 1;let b = 2; = ;console.log(a);console.log(b);

In diesem Beispiel wird die Destrukturierungszuweisung verwendet, um die Werte zweier Variablen auszutauschen.

Ausführen von Babel

Nachdem Sie nun eine gebrauchsfertige Babel-Installation haben, können Sie den Befehl build ausführen, um den Kompilierungsprozess auszuführen:

npm run build

Dies nimmt den Code von src/main.js, transformiert ihn in ES5-Code und gibt den transformierten Code in dist/main.js aus.

Hier ist, was es produziert hat:

"use strict";var a = 1;var b = 2;var _ref = ;a = _ref;b = _ref;console.log(a);console.log(b);

Wie Sie sehen, wurde let durch var ersetzt, und Babel hat eine temporäre Variable (durch den Unterstrich gekennzeichnet) eingeführt, um den Austausch zu erleichtern.

Und das war’s. Der Code, den Sie in das Verzeichnis src schreiben, wird in frühere Versionen der Sprache übersetzt. Wenn Sie der Voreinstellung keine Optionen hinzufügen, werden standardmäßig alle Transformationen geladen. Sie können die Zielbrowser auch wie folgt angeben:

{ "presets": } }] ]}

Dadurch werden die erforderlichen Transformationen geladen, um die neuesten zwei Versionen jedes Browsers und Safari größer oder gleich Version 7 zu unterstützen. Die verfügbaren Optionen für die Zielbrowser finden Sie im Browserlist-Repository.

Ökosystem Babel: Ein kurzer Überblick

Wie Sie im vorherigen Abschnitt bemerkt haben, wird Babel bei der Installation nichts von selbst tun. Wir müssen eine Reihe von Plugins installieren, um das gewünschte Verhalten zu erzielen, oder wir können Voreinstellungen verwenden, bei denen es sich um vordefinierte Plug-In-Sätze handelt.

Normalerweise wird jede Funktion, die Sie einschließen möchten, in Form eines Plugins vorliegen. Einige Beispiele für ES2015 sind:

• Konstanten
• Pfeilfunktionen
• Block-Scoped-Funktionen
• Klassen
• for-of
• spread
• Template-Literale

Siehe Plugins Seite in den Babel-Dokumenten für eine vollständige Liste.

Aber manchmal möchten Sie nicht alle Plugins einzeln einbinden. Es gibt also vorgefertigte Voreinstellungen, die die Installation jedes Plugins erleichtern.

Die drei derzeit verfügbaren offiziellen Presets sind:

• Env
• React
• Flow

Env ist die am häufigsten verwendete und die, die wir hier verwendet haben. Es lädt automatisch alle notwendigen Transformationen, um Ihren Code abhängig von den Zielbrowsern kompatibel zu machen.

Das React-Preset transformiert Code, der normalerweise in React-Projekten zu finden ist, und fügt hauptsächlich Kompatibilität mit Flow-Annotationen und JSX hinzu.

Und schließlich wird die Flow-Voreinstellung verwendet, um den Code von Flow-Typ-Annotationen zu bereinigen (obwohl nicht überprüft wird, ob die Typen gültig sind oder nicht.)

Babel Polyfill

Es gibt JavaScript-Funktionen, die syntaktisch nicht transformiert werden können, da normalerweise keine äquivalente Funktionalität implementiert ist, z. B. Versprechen und Generatorfunktionen.

Diese Art von Funktionen muss im Browser von einer Bibliothek implementiert werden, um in Ihrem Code verwendet zu werden, und das ist die Arbeit eines Polyfill.

Das Babel-Polyfill besteht aus core-js und der Regenerator-Laufzeit. Zusammen decken sie alle Funktionen in ES2015 + ab.

Erweiterte Verwendung

Wie bereits erwähnt, kann Babel auch verwendet werden, um Funktionen zu transformieren, die noch nicht in der Sprache implementiert wurden. Ein gutes Beispiel dafür ist der class fields proposal (derzeit bei TC39 stage 3: candidate). Dies ist besonders bei React-Entwicklern beliebt, da es die Notwendigkeit beseitigt, Methoden explizit an eine bestimmte Komponente zu binden, und auch bedeutet, dass state einer Komponente als Klassenfeld deklariert werden kann (wodurch möglicherweise kein Konstruktor erforderlich ist).

Für diejenigen unter Ihnen, die heute Klassenfelder verwenden möchten, müssen Sie die babel-plugin-transform-class-properties als dev-Abhängigkeit hinzufügen:

npm install --save-dev babel-plugin-transform-class-properties

Sie würden Ihre .babelrc -Datei auch wie folgt aktualisieren:

{ "presets": , "plugins": }

Jetzt kannst du schreiben:

class App extends Component { state = { count: 0 }; incCount = () => { this.setState(ps => ({ count: ps.count + 1 })); }; render() { return ( <div> <p>{ this.state.count }</p> <button onClick={this.incCount}>add one</button> </div> ); }}

Und es hört hier nicht auf. Sie können Babel auch verwenden, um der Sprache eigene neue Funktionen hinzuzufügen, wie unser Tutorial Understanding ASTs by Building Your Own Babel Plugin zeigt.

Alternativen

Das Schreiben moderner Webanwendungen erfordert manchmal mehr als die in JavaScript verfügbaren Funktionen. Andere Sprachen können auch in kompatibles JavaScript übersetzt werden, aber auch andere nützliche Funktionen implementieren.

Die beliebteste Option ist TypeScript, ein reguläres JavaScript, das moderne ES-Funktionen implementiert, aber auch andere hinzufügt, insbesondere in Bezug auf die Typsicherheit.

Auf der anderen Seite gibt es völlig unterschiedliche Sprachen in verschiedenen Kategorien, von den funktionalen wie PureScript bis zu den objektorientierten wie Dart.

Für einen tieferen Überblick über alternative Sprachen, werfen Sie einen Blick auf 10 Sprachen, die zu JavaScript kompilieren.

Fazit

Babel ist eine großartige Option, um moderne Anwendungen zu schreiben und gleichzeitig JavaScript bereitzustellen, das von allen Entwicklern und der breiten Palette von Browsern verstanden werden kann, in denen der Code ausgeführt werden muss.

Babel ist nicht nur nützlich, um ES2015+ in frühere Versionen der Sprache umzuwandeln — sowohl im Browser als auch auf Plattformen wie Node.js — aber auch zum Hinzufügen neuer Funktionen, die nicht zum Standard gehören. Um zu sehen, was ich meine, schauen Sie sich einfach das npm-Verzeichnis an, um alle verfügbaren Babel-Plugins oder -Voreinstellungen zu finden.

Da sich JavaScript in einem so rasanten Tempo entwickelt, ist es offensichtlich, dass Browserhersteller eine Weile brauchen werden, um die neuesten Funktionen zu implementieren. Wenn Sie Babel einen Platz in Ihrem Toolkit geben, können Sie heute hochmodernes JavaScript schreiben, in dem sicheren Wissen, dass Sie keinen Ihrer Benutzer im Stich lassen. Was gibt es nicht zu lieben?