Erste Schritte mit Babel 7

JavaScript ist aufgrund der Breite des Ökosystems einzigartig. Während neue Standards syntaktischen Zucker hinzufügen, dauert es seine Zeit, bis sie von Browsern unterstützt werden. Babel umgeht dieses Problem durch automatische Transpilierung.

Die Idee hinter dem Produkt ist einfach: Babel nimmt ES6- oder ES7-Code auf und ersetzt die neuen syntaktischen Elemente durch Emulationscode. Die Ausgabe entspricht der klassischen JavaScript-Syntax und läuft auf älteren Browsern wie dem Internet Explorer.

Die erste Veröffentlichung von Babel eroberte die Welt im Sturm. Bald nach seinem Erscheinen wurde es von verschiedenen Frameworks wie React, Vue und Ember übernommen. Entwickler nutzen das Produkt oft, ohne zu wissen, dass es im Hintergrund arbeitet – mehr als ein beliebtes npm-Projekt hat eine Abhängigkeit von Babel.

  • Wie man eine App macht

Diese Abhängigkeiten verwandelten den Release-Prozess des Vorgängers in eine konfliktreiche Angelegenheit. Die Version 7, die immer noch von einem kleinen Betreuerteam verwaltet wird, versucht daher, so kompatibel wie möglich zu sein. Es gibt nur wenige Änderungen, und die Qualität der Codegenerierung bleibt hoch (wenn Sie mit einem Team arbeiten, hilft Ihnen das Speichern von Dokumenten in der Cloud, den Zusammenhalt zu bewahren).

Wenn Sie noch nie mit Babel gearbeitet haben, lassen Sie sich von dieser Anleitung leiten. Die Möglichkeit, fortgeschrittene JavaScript-Funktionen ohne Kompatibilitätsprobleme zu nutzen, macht das Leben viel einfacher.

Möchten Sie einige Tools, um Ihren Prozess zu rationalisieren? Unser Leitfaden für den besten Website-Builder wird Ihnen dabei helfen. Sie wollen langfristigen Support? Holen Sie sich den richtigen Webhosting-Dienst.

Versionsprüfung

Babel befindet sich normalerweise in der Node-Laufzeitumgebung. Beginnen wir mit der Überprüfung der verwendeten Versionen. Die Ausgabe liefert den Versionsstand auf der Ubuntu 14.04 Workstation, die zur Erstellung des folgenden Artikels verwendet wurde. Das ist keine Pedanterie – die Abbildung zu diesem Schritt zeigt, dass das Babel-Team die Unterstützung für einige Node.js-Versionen eingestellt hat.

tamhan@tamhan-thinkpad:~$ node --versionv8.14.0tamhan@tamhan-thinkpad:~$ npm --version6.4.1

Änderung der Paketnamen

Eine einschneidende Änderung in Version 7 bestand darin, die Babel-Pakete in einen eigenen Namensraum zu verschieben. Ältere Pakete wurden nicht aus den verschiedenen Repositories entfernt. Dies ist wichtig, da die Verwendung von alten Paketnamen zu der Situation führt, die in der Abbildung zu diesem Schritt gezeigt wird.

tamhan@tamhan-thinkpad:~/workspaceB7$ npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node. . .+ @babel/[email protected]+ @babel/[email protected]+ @babel/[email protected]+ @babel/[email protected]

Add a build action

Der obige Schritt setzt voraus, dass Sie innerhalb eines npm-Projekts arbeiten. In diesem Fall ist es einfach, Babel über die Build-Aktion auszuführen. Öffnen Sie package.json und ändern Sie es wie im folgenden Code gezeigt:

{. . ."main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "babel index.js -d lib"},

Transpilieren Sie den Code von Hand

Um Babel in Betrieb zu nehmen, müssen Sie die Build-Aktion auslösen. Dies geschieht am besten über den Befehl npm run. Der Wert -d teilt Babel mit, dass die Ergebnisse im Ordner lib abgelegt werden müssen – die Abbildung zu diesem Schritt zeigt, dass der Ordner sofort erstellt wird.

tamhan@tamhan-thinkpad:~/workspaceB7$ npm run build> [email protected] build /home/tamhan/workspaceB7> babel index.js -d libSuccessfully compiled 1 file with Babel.

Eine Frage der Konfiguration

Der Aufruf von Babel ohne weitere Konfigurationsoptionen ermöglicht keine Transpilierung. Code kann nur transpiliert werden, wenn das Framework weitere Informationen über die Zielumgebung erhält. Dies kann über einen Kommandozeilenparameter oder durch das Erstellen einer Datei namens .babelrc im Projektstamm erfolgen.

Babel konfiguriert sich selbst über eine Reihe von Plugins, von denen jedes Transpilations-Transformationen auf die Codebasis anwendet. Wir verwenden das preset-env-Paket – es wird mit einem vorkonfigurierten Satz von Transformationen geliefert, die die meisten Bereiche abdecken sollen.

{"presets": }

Zeit für eine Testfahrt

Fügen Sie der index.js ein wenig New-Age-JavaScript hinzu, um das Programm anhand eines Live-Codes zu testen. Der zu diesem Schritt gehörende Code würde auf älteren Browsern nicht funktionieren – die implizite Funktion wird durch eine normale Deklaration ersetzt, wie in der Abbildung gezeigt.

function tamstest(){.map((n) => n + 1);}

Anpassen des Targeting

preset-env wendet die meisten Transpilierungen standardmäßig an: Das Ziel des Produkts ist es, universell kompatibles JavaScript ohne Rücksicht auf Bandbreiten- und Leistungskosten zu erstellen. Sie können die Konfiguration ändern, indem Sie ein targets-Objekt übergeben – das folgende Beispiel zielt auf bestimmte Versionen von Chrome und IE.

{"presets": ]}

Erweitertes Targeting

Babels Browser-Targeting ist nicht auf Chrome und Internet Explorer beschränkt. Dank der Zusammenarbeit mit browserslist können Entwickler aus mehr als einem Dutzend Zielen auswählen, wie unten gezeigt.

Namen unterscheiden nicht zwischen Groß- und Kleinschreibung:

  • Android für Android WebView.
  • Baidu für Baidu Browser.
  • BlackBerry oder bb für Blackberry Browser.
  • Chrome für Google Chrome.
  • ChromeAndroid oder and_chr für Chrome für Android.
  • Edge für Microsoft Edge.
  • Electron für Electron Framework. Es wird in die Chrome-Version konvertiert.
  • Explorer oder ie für Internet Explorer.
  • ExplorerMobile oder ie_mob für Internet Explorer Mobile.
  • Firefox oder ff für Mozilla Firefox.
  • FirefoxAndroid oder and_ff für Firefox für Android.
  • iOS oder ios_saf für iOS Safari.
  • Node für Node.js.Opera für Opera.
  • OperaMini oder op_mini für Opera Mini.
  • OperaMobile oder op_mob für Opera Mobile.
  • QQAndroid oder and_qq für QQ Browser für Android.
  • Safari für Desktop Safari.
  • Samsung für Samsung Internet.
  • UCAndroid oder and_uc für UC Browser für Android.

Erweitertes Targeting, Teil zwei

Browserlist kann auch erweiterte Abfragen annehmen. Auf seiner Homepage sind die Konfigurationsoptionen aufgelistet, von denen fast alle auch innerhalb von Babel verwendet werden können, indem babelrc modifiziert wird. Abfragen können lokal ausgewertet werden, wenn auf Ihrer Workstation npx installiert ist.

{"targets": "> 0.25%, not dead"}

Automatische Transpilierung

Das Aufrufen von Babel von Hand wird schnell mühsam. Das Dienstprogramm nodemon überwacht Dateisystemressourcen und feuert Befehle ab, wenn Änderungen festgestellt werden. Theoretisch wird das Hinzufügen von Nodemon-Unterstützung durch eine kleine Änderung an package.json gehandhabt.

{"name": "workspaceb7",. . ."main": "index.js","scripts": {"start": "nodemon --exec babel-node index.js",

Prüfe auf Vorhandensein

Einige Workstations haben Nodemon global installiert. Wenn dies nicht der Fall ist, wird der Aufruf des Programms eine Fehlermeldung ähnlich der unten gezeigten ausgeben. Glücklicherweise lässt sich nodemon leicht mit dem Befehl npm install installieren.

tamhan@tamhan-thinkpad:~/workspaceB7$ npm install --save-dev nodemon

Funktionalität prüfen

Feuern Sie npm start in einem Terminalfenster an und ändern Sie den Inhalt von index.js mit einem Editor wie gedit oder Visual Studio Code. Nach dem Speichern wird nodemon Statusinformationen ausgeben.

 restarting due to changes... starting `babel-node index.js` clean exit - waiting for changes before restart

Fix transpilation

Während die Erkennung von nodemon an dieser Stelle einwandfrei funktionieren sollte, wird der Inhalt der index.js-Datei, die in lib gefunden wird, nicht aktualisiert. Das liegt an einer Besonderheit von babel-node – es überträgt die transpilierten Dateien nicht auf die Festplatte. Stattdessen wird eine modifizierte Version der Node-CLI ausgelöst, die mit den transpilierten Dateien arbeitet.

Code programmatisch transpilieren

Babel ist nicht auf die Arbeit in der Kommandozeile beschränkt. Wenn die richtigen Pakete installiert sind, kann der Code auch von einem anderen Programm aus transpiliert werden. Das zu diesem Schritt gehörende Snippet wendet eine Reihe von grundlegenden Transformationen auf einen Eingabe-String an. Beachten Sie, dass die Konfigurationseinstellungen in der Regel aus einer babelrc-Datei stammen.

var babel = require("@babel/core");import { transform } from "@babel/core";import * as babel from "@babel/core";babel.transform("code();", options, function(err, result) {result.code;result.map;result.ast;});

Ganze Dateien transpilieren

Quellcode wird normalerweise nicht in String-Variablen gespeichert. Die Babel-API berücksichtigt dies durch eine Reihe von dateibezogenen Funktionen, die auf den Eingabestring für eine Variable mit einem Dateinamen verzichten. Die Ergebnisse werden jedoch als normale JavaScript-Variable zurückgegeben.

babel.transformFile("filename.js", options, function (err, result) {result; // => { code, map, ast }});

Sync und async

Babel 7 führte synchrone und asynchrone Versionen der meisten API-Aufrufe ein. Stellen Sie sicher, dass Sie die richtige für Ihre Bedürfnisse wählen – während das Transpilieren von kleinen Beispielen im Handumdrehen erledigt werden kann, kann das Loslassen von Babel auf komplexere Dateien leicht zu Verzögerungen von Dutzenden von Sekunden führen.

Erfahren Sie mehr über die einzelnen Plugins

Sollten Sie sich jemals fragen, was im Hintergrund passiert, besuchen Sie einfach diese Seite. Sie bietet eine Liste aller Plugins, die derzeit in der Babel-Distribution enthalten sind, und enthält auch ein paar Hinweise für alle, die ein eigenes Plugin erstellen wollen.

TypeScript-Spezifika ausschalten

Babel beschränkt sich nicht darauf, JavaScript-Elemente der Neuzeit zu transpilieren. Das Produkt enthält eine funktionsbeschränkte TypeScript-Engine. Sie entfernt Typisierungsinformationen und ersetzt erweiterte Elemente. Leider führt Babel keine Typprüfung durch – damit entfällt einer der wichtigsten Vorteile der TypeScript-Sprache.

{"presets": }

Babel online ausführen

Während die Transpilierungsvorgänge in der Regel reibungslos ablaufen, treten manchmal Probleme auf. In diesem Fall ist die Babel REPL hilfreich. Sie führt Babel im Browser Ihres Arbeitsplatzes aus und zeigt Ein- und Ausgabe direkt nebeneinander an.

Lernen Sie über Schmerzpunkte

In unserer Einführung wurde erklärt, dass Babel in verschiedenen Projekten weit verbreitet ist. Das Team der Babel-Maintainer vereinfacht Versions-Upgrades mit einem detaillierten Änderungsprotokoll. Wenn Sie Babel programmatisch verwenden, vergessen Sie nicht, den API-Upgrade-Leitfaden zu konsultieren.

Dieser Artikel wurde ursprünglich in Ausgabe 283 des Magazins für kreatives Webdesign Web Designer veröffentlicht. Kaufen Sie Ausgabe 283 hier oder abonnieren Sie Web Designer hier.

  • Wie Sie JavaScript schneller und leichter programmieren
  • 5 fantastische Javascript-APIs
  • 27 erstklassige Website-Vorlagen

Leave a Reply