JavaScript-ES6-Module: so funktionieren import und export

In diesem Kapitel geht es um Module und Import/Export in JavaScript. Wir sehen uns an, wie du damit deinen Code organisierst und teilst, und wie Daten sicher zwischen verschiedenen Dateien wandern. Konkrete, praktische Beispiele zeigen, wie sich diese Funktionen im eigenen Code einsetzen lassen.

Module und Import/Export gehören zur 2015 eingeführten Spezifikation ECMAScript 6 (ES6). Alle aktuellen Browser unterstützen sie nativ: Ein Transpiler wie Babel oder ein Bundler wie Webpack ist nur noch nötig, um sehr alte Browser zu bedienen oder Dateien zu bündeln.

Was ist ein Modul in JavaScript (ES6)?

Module sind eine Möglichkeit, Code zu strukturieren und zu organisieren, indem man ihn auf mehrere unabhängige Dateien aufteilt. Der Code bleibt auf lange Sicht verständlicher und wartbarer, weil die einzelnen Teile besser lesbar und leichter wiederverwendbar sind.

Das Prinzip der Module und ihre Vorteile

Das Prinzip beruht auf der Anweisung „export“, die bestimmte Teile des Codes von außerhalb des Moduls erreichbar macht. Alles, was der Endnutzer nicht braucht, bleibt verborgen, und nur die relevanten Elemente werden exportiert.

Die Vorteile sind zahlreich. Zunächst vermeidet die Isolierung der einzelnen Codeteile Namenskonflikte, was besonders zählt, wenn ein Team an einem großen Projekt arbeitet. Außerdem lässt sich der Code besser ordnen und strukturieren, aufgeteilt in Dateien, die leichter zu pflegen sind. Und schließlich lässt er sich mühelos wiederverwenden, indem du ihn in andere Projekte importierst.

Ein Modul mit der Anweisung „export“ erstellen

Um in JavaScript ein Modul zu erstellen, setzt du die Anweisung „export“ vor die Elemente, die von außerhalb des Moduls erreichbar sein sollen. Willst du etwa eine Funktion „saluer“ exportieren, die in einer Datei module.js definiert ist, schreibst du:

export function saluer() {
  console.log("Bonjour !");
}

Genauso lassen sich mehrere Elemente eines Moduls exportieren, indem du die Anweisung „export“ vor jedes davon setzt. Zum Beispiel:

export const maVariable = 'ma variable';
export function maFonction() {
  console.log('Je suis une fonction');
}
export class MaClasse {
  constructor() {
    console.log('Je suis une classe');
  }
}

Mit der Anweisung „export default“ legst du ein Standardelement deines Moduls fest. Importierst du kein Element ausdrücklich, wird stattdessen das Standardelement importiert. Zum Beispiel:

export default function maFonctionParDefaut() {
  console.log('Je suis la fonction par défaut');
}

Wie importiert man ein Modul in JavaScript (ES6)?

Mit Modulen teilst du deinen Code auf mehrere Dateien auf und organisierst dein Projekt wirkungsvoller. Im vorigen Abschnitt haben wir gesehen, wie sich ein Modul in JavaScript mit der Anweisung export exportieren lässt. Aber wie holst du ein Modul in deinen eigenen Code? Genau darum geht es hier.

Die Anweisung „import“ verwenden

Um ein Modul in JavaScript zu importieren, nimmst du die Anweisung import. Hier ein Beispiel:

import * as monModule from '/chemin/vers/mon/module';

Diese Syntax importiert alle Elemente des Moduls monModule und legt sie in einem Objekt gleichen Namens ab. Du kannst auch genau angeben, welche Elemente du haben willst, indem du hinter import die Liste der Elemente in geschweiften Klammern schreibst:

import { maFonction, maVariable } from '/chemin/vers/mon/module';

Benannte Elemente eines Moduls lassen sich beim Import auch umbenennen, mit der Anweisung „import“ und der Syntax „{ nom1 as alias1, nom2 as alias2 }“, so:

import { nom1 as alias1, nom2 as alias2 } from 'module';

Eine Klasse oder eine Funktion, die als export default exportiert wird, importierst du so:

export

export default class MonModule {
  constructor() {
    console.log('Je suis une classe');
  }
}

import MonModule from 'module';

Kommen Standardimport und benannter Import aus demselben Modul, gehört der Standardimport nach vorn, so:

import MonModule, { maFonction } from './monModule';

// Standardimport verwenden
const monModule = new MonModule();

// benannten Import verwenden
maFonction();

Und schließlich gibt es den dynamischen Import mit der Methode „import()“, der ein Modul asynchron lädt. Das hilft, wenn du ein Modul erst dann laden willst, wenn es wirklich gebraucht wird, statt den Browser unnötig zu belasten.

import('./monModule').then(monModule => {
  // die importierten Elemente verwenden
  monModule.maFonction();
  monModule.maVariable;
});

Wie verwendet man Module im Browser?

Wir haben gesehen, wie sich Module mit der Anweisung „export“ erstellen und exportieren lassen und wie du sie mit der Anweisung „import“ importierst. Diese Anweisungen werden allerdings noch nicht von allen Browsern unterstützt. Um Module trotzdem im Browser zu nutzen, gibt es mehrere Wege, die dieser Abschnitt vorstellt.

Das Attribut „type=module“ in „script“-Tags verwenden

Um Module im Browser zu verwenden, musst du im Tag „script“ deiner JavaScript-Datei das Attribut „type=module“ angeben. Damit weiß der Browser, dass die Datei ein Modul ist und anders behandelt werden muss als ein normales Skript. Hier ein Codebeispiel:

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

module.js

export const maVariable = 'ma variable';
export function maFonction() {
  console.log('Je suis une fonction');
}
export class MaClasse {
  constructor() {
    console.log('Je suis une classe');
  }
}

script.js

import { maVariable, maFonction, MaClasse } from './module.js';

console.log(maVariable); // Gibt 'ma variable' aus

Bundler wie Webpack verwenden

Ein anderer Weg, Module im Browser zu laden, ist ein Bundler. Ein Bundler ist ein Werkzeug, das mehrere Module und JavaScript-Dateien zu einer einzigen Datei zusammenfasst, die der Browser leichter lädt. Webpack ist ein verbreiteter Bundler mit vielen fortgeschrittenen Funktionen für die Verwaltung von Modulen. Wenn du Webpack lernen willst, habe ich dazu ein Tutorial geschrieben.

Fazit

Wir haben gesehen, wie du ein Modul mit der Anweisung „export“ erstellst und wie du es mit der Anweisung „import“ importierst. Ebenso haben wir uns Pfade und Umgebung beim Importieren von Modulen angesehen sowie den Einsatz von Standard- und benannten Importen/Exporten. Und zuletzt, wie Module im Browser laufen, mit dem Attribut „type=module“ in den Tags „script“.

Dieses Tutorial hat dir die Grundlagen für den Einstieg in JavaScript gegeben und die Schlüsselkonzepte der Sprache verständlich gemacht. Von hier aus kannst du weiterlernen und dich auf ein Gebiet wie die Webentwicklung spezialisieren. Bleib motiviert und viel Erfolg mit deinen künftigen Projekten!