© saicle/Shutterstock.com
Schritt für Schritt zum SystemJS-Profi

JavaScript-LEGO


Über die Verwendung eines Modul­systems für JavaScript muss man mittlerweile nicht mehr diskutieren – die Frage ist eher, auf welches Modulsystem setzt man, damit die Applikation auch zukunftssicher ist? Eine mögliche Variante ist das ECMAScript-Modulsystem mit einer Kombination aus SystemJS und JSPM. Genau damit werden wir uns jetzt beschäftigen.

Wer etwas auf sich hält, der setzt ein Modulsystem in seiner JavaScript-Applikation ein. Bis auf die Tatsachen, dass es mittlerweile jeder macht, warum sollten Sie sich die Arbeit machen und in Ihre Applikation ein Modulsystem einführen oder bei neuen Applikationen auf ein Modulsystem setzen?

Die Erklärung ist ganz einfach: Kein Entwickler lädt gerne die Skriptdateien seiner Applikation manuell. Zu einfach ist es, hier Dateien zu vergessen, was nur zu ärgerlicher Fehlersuche führt. Noch schlimmer wird die Situation, wenn verschiedene Skripte aufeinander aufbauen und Sie diese Abhängigkeiten von Hand auflösen müssen. Und genau in solchen und in noch vielen weiteren Situationen kann Ihnen ein Modulsystem helfen.

Nun ist es ja in JavaScript bekanntlich immer so, dass es nicht nur eine etablierte Lösung gibt, sondern mindestens eine Handvoll. Warum sollte es bei Modulsystemen anders sein? Glücklicherweise ist die Auswahl an Modulsystemen noch recht überschaubar.

SystemJS

Bis vor einiger Zeit konkurrierten vor allem das CommonJS- und das AMD-Modulsystem um die Vorherrschaft in der JavaScript-Welt. Nachdem es sich über Jahre hinweg herausgestellt hat, dass ein Modulsystem eine durchaus sinnvolle Errungenschaft ist, wurde ein Entwurf in den Sprachstandard aufgenommen.

Der Vorteil hierbei ist ganz klar die native Unterstützung der Browser. Das Problem ist, dass noch kein Browser die JavaScript-Module unterstützt, und dass es sich beim Standard weder um die etablierten AMD- noch um die CommonJS-Module handelt, sondern eine abweichende Syntax festgelegt wurde.

Modulsystem

Syntax

Implementierung

AMD

Require, define

RequireJS

CommonJS

Require, module.exports

Browserify

ES 6 Modules

Import, export

SystemJS

Tabelle 1: Die verschiedenen Modulsysteme auf einen Blick

Wollen Sie nun also Ihre Applikation modularisieren, bleibt Ihnen nur wieder der Griff zum Modul Loader Ihres Vertrauens. Und hier kommt SystemJS ins Spiel.

Die Idee hinter dieser Bibliothek ist es, Ihnen ein Polyfill zur Verfügung zu stellen, mit dem Sie modulare Applikationen erstellen können. SystemJS ist dabei recht flexibel und akzeptiert nicht nur die ECMAScript-Modulsyntax, sondern unterstützt auch AMD- und CommonJS-Module. Das bedeutet, dass Sie, egal welches Modulsystem Sie einsetzen möchten, mit SystemJS nichts falsch machen.

Installation

Installiert wird SystemJS nach bester JavaScript-Manier über einen der vielen Paketmanager. Ein npm install systemjs führt genauso zum Ergebnis wie bower install systemjs oder jspm install npm:systemjs. Ziel dieser Aktion ist es, den Quellcode von SystemJS auf Ihr System zu laden, was Sie natürlich auch von Hand über Ihren Browser erledigen können.

Die beste Kombination ist SystemJS und JSPM, da diese beiden Werkzeuge nahtlos zusammenarbeiten. Das bedeutet, dass Sie die mit JSPM installierten Pakete direkt mit SystemJS laden können. Aber dazu später mehr.

Haben Sie die system.js-Datei gespeichert, können Sie den nächsten Schritt unternehmen und Ihre Applikation entwickeln. Wollen Sie die ECMAScript-Modulsyntax verwenden, müssen Sie zusätzlich dazu noch einen Transpiler wie Traceur, Babel oder TypeScript installieren. Diesen speichern Sie entweder im Basispfad Ihrer Applikation, den Sie mit der Eigenschaft baseURL angeben, oder Sie erstellen ein manuelles Mapping mit der map-Eigenschaft der Konfiguration (Listing 1).

Listing 1: „index.html“ mit Konfiguration

<script src="node_modules/systemjs/dist/system.js"...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang