Module in JavaScript

Module strukturieren Code in JavaScript.

Die zentralen keywords dazu sind import und export.

Ein Modul ist immer in einer Datei, man kann nicht mehrere Module pro Datei haben (Modul = Datei). Alle Deklarationen in einem Modul sind erstmal nur dort sichtbar (scope). Um einzelne Objekte nach außen sichtbar zu machen, müssen sie aus dem Modul exportiert werden.

Voraussetzungen für Module

Um Module zu verwenden, muss die importiere top-level JavaScript-Datei vom Typ "module" sein:

<script src="js/app.js" type="module"></script>

Syntax für Import/Export (named export)

Um Variablen oder Funktionen aus einem Modul für andere Module verfügbar zu machen, schreibt man das keyword export vor diese Variablen oder Funktionen. Das sind "named exports".

export const myUrl = "someUrl";

export function showMessage() {
  console.log("Look here!");
}

Der import funktioniert dann so:

import {myUrl, showMessage} from './myJsFile.js'

Alternativ kann man beim Export die exportierten Variablen/Funktionen am Ende der Datei als Liste exportieren. Dabei kann man sie auch umbenennen.

const myUrl = "someUrl";

function showMessage() {
  console.log("Look here!");
}

export {myUrl as renamedUrl, showMessage}

import {renamedUrl, showMessage} from './myJsFile.js'

Export als default

Wenn Objekte als default exportiert werden, muss das importierende Modul den Namen des Objektes nicht wissen.

export default showMessage() {
  console.log("Look here!");
}

import anyName from './myJsFile.js'

Ein Modul kann nur einen default export haben, aber man kann einen default export haben und ggf. zusätzlich mehrere named exports. Das default keyword funktioniert auch bei der Syntax mit gesammelten exports:

const myUrl = "someUrl";

function showMessage() {
  console.log("Look here!");
}

export {myUrl, showMessage as default}

Import-Syntax:

import anyNameForShowMessage, {myUrl} from './myJsFile.js'

Modul-Exporte als Namespace zusammenhalten

Um alle Exporte eines Moduls in einem namespace zusammenzuhalten gibt es zwei Varianten:

1) Namespace beim Importieren definieren

Folgendes Modul-Definition:

export const myUrl = "someUrl"

export function showMessage() {
  console.log("Look here!");
}

Beim Importieren kann man alle Deklarationen importieren:

import * as myNameSpace from './myJsFile.js'

console.log(myNameSpace.myUrl);
myNameSpace.showMessage

2) Namespace beim Export definieren

Wir exportieren keine einzelnen Objekte, sondern nur ein Objekt, welches Zugriff auf alle zu exportierenden Objekte erlaubt.

const myUrl = "someUrl"

const someMessage = "Look here!"

function showMessage() {
  console.log(someMessage);
}

const MyNameSpace = {
  myUrl,
  showMessage
}

export default MyNameSpace

Beim Import:

import MyNameSpace from './myJsFile.js'

console.log(MyNameSpace.myUrl);
MyNameSpace.showMessage

Module aggregieren

Ein Modul kann auch Exporte eines anderen Moduls "weiterleiten", so dass das übergeordnete Modul weniger Module kennen muss.

const myUrl = "someUrl";

function showMessage() {
  console.log("Look here!");
}

export {myUrl, showMessage as default}
export {someFunction} from './anotherModule.js'

In diesem Falle ist someFunction in dem aktuellen Modul nicht sichtbar/verwendbar (not in scope), aber kann aus diesem Modul importiert werden.