Tipps und Tricks für AngularJS, Teil 2: ES2015
Moderne JavaScript-Konstrukte dienen nicht nur der Übersichtlichkeit von Projekten, sondern können sie auch zukunftssicher machen. Damit sie aber von allen Browsern verstanden werden, sind einige Kniffe nötig.
- Vildan Softic
Moderne JavaScript-Konstrukte dienen nicht nur der Übersichtlichkeit von Projekten, sondern können sie auch zukunftssicher machen. Damit sie aber von allen Browsern verstanden werden, sind einige Kniffe nötig.
Die Möglichkeiten, die das mittlerweile ECMAScript 2015 betitelte ES6 zur Verfügung stellt, liefern gerade im Zusammenspiel mit AngularJS Mittel, um den Anwendungscode sauber zu organisieren und leserlicher zu gestalten. Unter den entsprechenden Neuerungen sind unter anderem Lambda-Ausdrücke, JavaScript-Klassendefinitionen und allen voran die Option, externe JavaScript-Dateien per Export zu referenzieren. Eine Übersicht der in ES2015 ergänzten Features lässt sich in einem separaten Artikel nachlesen.
Da bisher jedoch noch recht wenige Browserversionen (meist experimentelle Builds) ECMAScript in der Version 2015 nativ unterstützen, stellt sich die Frage, wie man ihre Features derzeit verwenden kann. Dieser Artikel zeigt dazu ein mögliches Vorgehen, in dem der populäre Transpiler 6to5 und Gulp für die Aufgabenautomatisierung zum Einsatz kommen. Das fertige Beispiel lässt sich über das Github Repo Angular-ES6 beziehen.
Aus Neu mach Alt
Um ES2015-Code schon heute nutzen zu können, ohne eine Reihe von Browsern auszuschließen, ist die einfachste Herangehensweise, ihn nach ES5 zu transpilieren. Ein Transpiler wandelt im Gegensatz zu einem klassischen Compiler eine Hochsprache in eine andere um, sodass sich beispielsweise Versionsunterschiede überwinden lassen (z.B. Python 2 zu Python 3). Compiler hingegen kümmern sich beispielsweise um die Umwandlung von höheren Sprachen in maschinennähere (z.B. C zu Maschinensprache).
In der Welt von JavaScript stehen dafür unter anderem Traceur von Google, ESNext und 6to5 zur
Verfügung. Während Traceur noch ein Laufzeitskript für das Umwandeln und Interpretieren von ES2015-Code benötigt, analysiert 6to5 den Code vorab statisch und kompiliert ihn im Anschluss, um ein lesbares Ergebnis zu generieren. Ein Vergleich der Projekte ist auf der Seite des Anbieters zu
finden.
Mittlerweile haben sich die Teams hinter dem Transpiler ESnext und 6to5 zusammengeschlossen, um gemeinsam weitere Features und kürzere Release-Zyklen anzubieten.
Für das gezeigte Beispiel liegen die ES2015-Dateien jeweils im Ordner src und deren Transpilat in dist.
Der neue Paket-Manager JSPM
Da eventuell auch externe Module und Bibliotheken in ES2015 beschrieben sind und bereits auf die zuvor erwähnte Import-Syntax zurückgreifen, ist es notwendig, auch sie korrekt beziehen und in das Projekt einbinden zu können. In letzter Zeit hat sich hierfür der JavaScript Package Manager JSPM als eine hilfreiche Alternative zu Bower, Jam, Brocolli und den zahlreichen anderen hervorgetan. Im Vergleich zu den vorhergenannten sieht JSPM seine Aufgabe nicht nur im Beschaffen der Module, sondern kümmert sich auch um ihre Einbindung innerhalb eines Projekts. Dafür wird der universelle Modul-Loader SystemJS verwendet, der neben ES2015-Modulen auch AMD, CommonJS und globale Skripte versteht. Darüber hinaus bietet JSPM eine Bundling-Option an, die ähnlich wie bei RequireJS mit dem r.js-Adapter, eine gebündelte Auslieferung von Dateien ermöglicht.
Die benötigten Quellen und Grundkonfiguration werden in einer Datei config.js definiert:
System.config({
"baseUrl": "dist",
"paths": {
"*": "*.js",
"github:*": "jspm_packages/github/*.js",
"npm:*": "jspm_packages/npm/*.js",
}
});
System.config({
"map": {
"angular": "github:angular/bower-angular@1.3.8",
"angular-mocks": "github:angular/bower-angular-mocks@1.3.8",
"bootstrap": "github:twbs/bootstrap@3.3.1",
"github:twbs/bootstrap@3.3.1": {
"css": "github:systemjs/plugin-css@0.1.0",
"jquery": "github:components/jquery@2.1.3"
}
}
});
Mit baseUrl gibt der Entwickler den Zielordner an, der die darzustellenden Projektdateien enthält. In der paths-Angabe lassen sich die Pfade einzelner wichtiger Ordner hinterlegen, die beispielsweise heruntergeladenen GitHub- beziehungsweise NPM-Pakete enthalten. Die Eigenschaft map definiert abschließend Aliase für die verwendeten Bibliotheken.
Um ein neues Paket hinzuzügen, reicht es, den folgenden Befehl auszuführen. JSPM kümmert sich danach automatisch um seinen Eintrag in config.js:
jspm install PAKETNAME
Wie schon in der Konfiguration zu erkennen, lassen sich dafür nicht nur Bower- und GitHub-Quellen sondern auch das NodeJS Repository verwenden.
Der Funktionsumfang von JSPM ist groß und wächst durch die aktive Community täglich. Für einen genauen Einblick ist der Wiki-Eintrag "Getting Started" zu empfehlen.
