© 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 ECM...

Neugierig geworden?

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang