ES2015 – Teil 6: Module

RequireJS – wenn dir bei diesem Stichwort schon ein Schauer über den Rücken läuft ist der nun folgende Artikel genau das Richtige für dich! In ES2015 gibt es eine Spezifikation für sogenannte Module, die das Aufsplitten von Code wesentlich lesbarer und einfacher machen. Schauen wir uns das mal genauer an…

Was ist ein Modul?

Ein Modul ist ein – im besten Fall – wiederverwertbares Stück Code. Nehmen wir zum Beispiel die Math Helferklasse von JavaScript: Diese ist automatisch überall verfügbar. Andernfalls müsste der Code für die Klasse immer dann für den Browser geladen werden, wenn er benötigt wird. Wollen wir also auf Seite 1 unserer Website mathematische Berechnungen anstellen, auf Seite 2 nicht aber dann auf Seite 3 wieder müssten wir den Code auf Seite 1 und 3 laden.

Jetzt könnte man denken: Ja aber warum dann nicht einfach immer laden, dann sparen wir uns den Aufwand.

Das macht für ein kleines Codeschnipsel natürlich Sinn – wenn es aber dann möglicherweise um eine Klasse geht, die 50kb groß ist, wird das ganz schnell zum Performanceproblem.

Und hier kommen ES2015 Module ins Spiel – damit können wir Code genau an der Stelle importieren, wo wir ihn benötigen.

 

 

Ein ES2015 Modul

Ein ES2015 Modul besteht eigentlich nur aus zwei Komponenten:

  1. Ein Stück Code, der in einer separaten Datei als Modul exportiert wird
  2. Eine weitere Datei, die dieses Modul wieder importiert

Ein einfaches Beispiel:

Der erste Codeschnipsel ist die Datei helpers.js. In dieser Datei könnten wir Funktionen vereinen, die wir an anderen Stellen im Code benötigen (oder natürlich auch Klassen). Das Schlüsselwort export legt dabei fest, dass etwas exportiert werden soll (überraschend, nicht war?!) – in diesem Fall die Funktion hello().

Im zweiten Schnipsel – der Datei app.js – wird dieser Code nun wiederum importiert. Hier kommt der – wir ahnen es – import Befehl ins Spiel. Bei diesem gibt es bereits eine kleine Besonderheit: Wir können die Dateiendung weg lassen, das .js wird automatisch ergänzt.
Der zweite wichtige Teil ist in den geschweiften Klammern: Hier bestimmen wir, welche Bereiche aus der Datei wir importieren wollen. Eine Moduldatei kann nämlich wie erwähnt auch mehrere Funktionen haben.

 

 

Mehrere Exporte in einem Modul

Machen wir ein Beispiel zu mehreren exportierten Funktionalitäten im selben Modul:

Diese Datei exportiert gleich zwei Funktionen. Damit haben wir jetzt mehrere Möglichkeiten, diese zu importieren:

Hier sind mal zwei Beispiele. Im ersten Beispiel importieren wir die gewünschten Funktionen einfach manuell. Das macht Sinn, wenn wir uns nur einzelne Funktionalitäten rauspicken wollen.

Im zweiten Beispiel importieren wir einfach alle Funktionalitäten und machen diese gleich noch unter einem neuen Namen verfügbar – nämlich helpers. Das ist praktisch, wenn die helpers ständig erweitert werden. Das Umbenennen macht hier natürlich Sinn damit es nicht später in der Entwicklung zu Namenskollisionen kommt, wenn wir zum Beispiel eine neue Helferfunktion entwickeln, deren Name aber in anderen Bereichen schon vorhanden ist.

 

 

Standardexport

Eine weitere Möglichkeit haben wir noch beim Export – das Schlüsselwort default. Damit können wir festlegen, was der Standardexport sein soll und können uns dann die geschweiften Klammern beim importieren sparen.

Das zweite Codebeispiel zeigt drei Varianten mit dem Import umzugehen:

  1. Wir importieren hello() direkt, weil es beim Export als default gekennzeichnet wurde. Wir könnten hier auch einen anderen Namen verwenden (z.B. greeting), da wir keine geschweiften Klammern verwenden wird automatisch der default Export verwendet.
  2. Wir importieren NUR die Funktion goodbye() mit geschweiften Klammern
  3. Wir importieren sowohl den default Export hello() als auch die Funktion goodbye()

 

Um die Module dann auch für ältere Browser wieder zusammenzusetzen benötigen wir noch einen sogenannten Moduleloader – zum Beispiel Webpack.

 

Was hälst du von den ES2015 Modulen? Benutzt du sie schon selbst? Hast du noch weitere Tipps? Wir freuen uns wenn du sie in den Kommentaren mit uns teilst!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*