Transpilieren von ECMAScript 6 in WebStorm
Kommentare

Zwar nimmt der Support von ECMAScript 6 (beziehungsweise ECMAScript 2015) in modernen Browsern und Runtimes immer mehr zu, um ES6-Code zu deployen, muss er allerdings nach wie vor zur aktuellen JavaScript-Version ES 5.1 kompiliert werden.

Um sich diese Aufgabe zu vereinfachen, kann dazu zum Beispiel WebStorm eingesetzt werden, das bereits einen umfangreichen ECMAScript6-Support mit sich bringt.

Transpiler mit WebStorms File-Watchers konfigurieren

Die Auswahl der JavaScript-Sprachversion, in diesem Fall also ECMAScript 6, erfolgt in den WebStorm-Einstellungen. Zu den verfügbaren Features des ES6-Support der beliebten IDE zählen zum Beispiel Smart Coding Assistance inklusive Code Completion für ES6, die passende Navigation für Module und Klassen oder eine vorbereitungslose Inspektion.

Über WebStorms File-Watchers-Feature können Transpiler wie Babel, den wir euch bereits vor seiner Umbenennung ausführlicher vorgestellt haben, oder Traceur konfiguriert und für das Kompilieren von ES6- zu ES5-Code genutzt werden. Für beide Transpiler verfügt WebStorm über vor-konfigurierte File-Watchers, die in den Einstellungen aufgerufen werden können.

Je nachdem, welchen Transpiler man mit der entsprechenden Default-Konfiguration nutzt, werden die kompilierten Dateien an unterschiedlichen Orten gespeichert. Für Babel werden sie neben den originalen Dateien, bei Traceur im out-Directory gespeichert. Allerdings können verschiedene Einstellungen des File-Watchers auch beliebig angepasst werden, etwa der Dateityp, der Umfang der überwachten Dateien, das Arbeitsdirectory in dem das Programm ausgeführt wird oder der Pfad zu den kompilierten Dateien.

Sowohl Babel als auch Traceur können als Task in einem Build-Tool oder Task-Runner eingerichtet werden; von Haus aus bringt WebStorm dafür die Integration von Gulp und Grunt mit. So kann das Transpilieren der ES6-Dateien problemlos aus dem Show tasks-Fenster gestartet werden. Voraussetzung dafür ist nur, dass der Task-Runner und alle benötigten Dependencies installiert und für die Ausführung bereit sind.

Wie man beim Setup von Babel beziehungsweise Traceur genau vorgehen sollte, zeigt Ekaterina Prigaras Blogpost noch mal ausführlicher. Dort finden sich auch einige weitere Tipps, die das Transpilieren von ECMAScript-6-Code vereinfachen sollen.

Aufmacherbild: Simultaneous translation von Shutterstock / Urheberrecht: Roman Suslenko

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -