Babel, SWC & esbuild – Ein Überblick über aktuelle JavaScript Transpiler

Babel, SWC & esbuild – Ein Überblick über aktuelle JavaScript Transpiler

Matthias Adrowski 21. März 2022 Expert Topics

0 Kommentare // Lesezeit: 5 min.

Begriffsklärung: Transpiler vs. Compiler

Während der Begriff Compiler recht weit verbreitet ist, so ist der Begriff Transpiler wohl weniger geläufig: Ein Transpiler übersetzt den Programmcode einer höheren Programmiersprache in eine andere höhere Programmiersprache. Der Programmcode einer höheren Programmiersprache ist vom Grad der Abstraktion von der Maschinensprache deutlich entfernt. Es wird beispielsweise TypeScript Code in JavaScript Code übersetzt.

Anders ist es beim Compiler, hier wird Programmcode einer höheren Abstraktionsebene in Maschinencode übersetzt. Zum Beispiel, wenn Programmcode der höheren Programmiersprache C mit einem Compiler in Maschinencode übersetzt wird.

Im Zusammenhang mit diesem Beitrag wird also ES6 Syntax mit neuen Features wie z.B. Classes, const und let Variablen, Destructuring etc. in Browser-kompatibles JavaScript übersetzt. Daher sprechen wir nach obenstehender Definition von Transpiling.

Geschichte von Babel

2005 wurde – nach 5 Jahren Pause – eine neue JavaScript Version veröffentlicht. Und seitdem hat die Entwicklung keine Pause mehr gemacht. Da zu dem Zeitpunkt die Browserlandschaft zum Großteil noch durch alte Browser gekennzeichnet war, die die neuen Versionen nicht unterstützt haben, wurden diese Features nur langsam angenommen. Zu nennen sind hierbei vor allem Internet Explorer Versionen < 8.0.

Das änderte sich mit dem Auftauchen von Babel. Das machte es zum ersten Mal recht einfach möglich, modernes JavaScript zu schreiben, ohne den Support von älteren Browsern zu verlieren. Seit dem Release im Jahr 2014 bis ins Jahr 2019 stiegen die wöchentlichen Download-Zahlen auf rund 16 Millionen Downloads, womit Babel als Transpiler für ES2015+ und das spätere ES6+ bis hin zu Support von JSX für React zum Platzhirsch wurde.

New Kids on the Block

Während Babel noch selbst in JavaScript geschrieben wurde, so kommen in den letzten Jahren neue Bibliotheken auf, die die gleichen Ziele verfolgen, aber auf kompilierte und moderne Sprachen setzen. Zum einen ist esbuild zu nennen, das in Go geschrieben wurde, zum anderen SWC, das in Rust geschrieben ist. Der Performance-Gewinn dieser Tools ist so riesig, dass sie in einer eigenen Liga spielen. So wirbt esbuild auf der Website mit Buildtimes von 0.33 Sekunden gegen 30+ Sekunden mit vergleichbaren Tools. Und SWC vergleicht sich auf der Benchmark-Seite in den meisten Fällen schon nur noch mit esbuild.

SWC & esbuild in Kürze

SWC wird von kdy1dev entwickelt, der laut eigenem Twitter-Account bei Vercel an Next.js arbeitet. Der SWC-Website ist zu entnehmen, dass der Transpiler u. a. von Projekten wie Next.js, Parcel, Deno, Vercel, ByteDance, Tencent und Shopify eingesetzt wird. SWC unterstützt neben JavaScript auch TypeScript und React-JSX Files.

esbuild wird von evanw entwickelt, der laut seiner Webseite ein CoFounder von Figma ist. Der Transpiler wird unter anderem in Projekten wie Vite und Snowpack, sowie vom Amazon CDK und dem Phoenix Framework benutzt. Unterstützt werden auch hier, neben JavaScript, TypeScript und React-JSX Files.

SWC ausprobieren

Zum Testen von SWC legt man lokal ein neues Projekt an und installiert die npm-Packages:

Mit folgenden npx-Command kann man das JS-File mit den Standardeinstellungen transpilieren:

Konfiguration

Zum Konfigurieren und Anpassen der Standardeinstellungen gibt es zwei Konfigurationsdateien:

  • .swcrc
  • spack.config.js

Das Kompilieren funktioniert von Haus aus ohne eigene Anpassungen. In Codebeispiel 1 sind die alle Konfigurationsmöglichkeiten aufgeführt:

In der spack.config.js lassen sich Quell- und Zielordner der zu verarbeitenden Dateien anpassen:

Bundling

Das Bundling von JavaScript- und TypeScript-Files nennt sich bei SWC ’spack’. Als Voraussetzung muss eine spack.config.js angelegt werden, in dem Quell- und Zielordner angegeben werden. Das Bundling kann dann im Terminal mit npx spack gestartet werden.

Minification

Zur Minification steht auf der SWC-Seite aktuell folgender Hinweis: 'Starting with v1.2.67, you can configure SWC to minify your code by enabling minify in your .swcrc file.'

esbuild ausprobieren

Die Pakete sind zu installieren mit:

Folgender Befehl ist auszuführen:

Konfiguration

Im Gegensatz zu SWC nutzt esbuild keine Konfigurationsdateien, sondern erlaubt die Konfiguration beim Aufruf des Programms. Die Dokumentation zeigt hierbei Beispiele für die Kommandozeile, JavaScript und Go auf. Hier ein Beispiel für JavaScript:

Bundling

Fürs Bundling muss nur, wie im Beispiel bundle als true angegeben werden. Ebenso gibt es die Möglichkeit, das Target für die Browser anzugeben, wie in der target Option zu sehen.

Minification & Sourcemap

Wie das Beispiel außerdem zeigt, werden diese Optionen unterstützt, aber die Dokumentationen geben noch viele weitere Details darüber aus, wie mittels der API und des Script Ansatzes weitgehender Einfluss auf den Prozess genommen werden kann.

Fazit

Beide Tools bieten also riesige Performance-Gewinne gegenüber dem Platzhirsch Babel, aber der Wechsel ist aufgrund der vielen Konfigurationsmöglichkeiten der Tools nicht immer als Drop-In möglich.

Außerdem hat der Performance-Gewinn nur indirekt Auswirkungen auf die Webseite, da diese Tools nur vom Entwickler oder in Deployment Pipelines genutzt werden. Aber gerade auf der Entwicklungsseite hilft es ungemein, wenn eine Änderung nach wenigen Augenblicken Auswirkungen auf dem Bildschirm zeigt, statt erst nach einigen Sekunden.


Kommentare

Keine Kommentare.
    Dateien hier ablegen