Webdesign · Entwicklung · SEO
ES-Module
ES-Module erklärt: JavaScript gezielt aufteilen | scinet
Redaktionell geprüft ·
Verständlich erklärt
ES-Module sind das standardisierte Modulsystem von JavaScript. Eine Datei kann gezielt Funktionen oder Werte exportieren; eine andere importiert genau diese Schnittstelle. ES steht für ECMAScript, den Sprachstandard hinter JavaScript.
Stell dir eine Website mit Navigation, Formular und Terminanzeige vor. Du möchtest nicht jede Funktion in einer einzigen großen Datei suchen. Module helfen dir, die Aufgaben zu trennen und ihre Abhängigkeiten sichtbar zu machen. Die sinnvolle Aufteilung nimmt dir das Modulsystem aber nicht ab.
Was import und export verbinden
Eine Funktion zur Formatierung eines Datums kann in einer eigenen Datei stehen. Mit export legst du fest, dass andere Module sie verwenden dürfen. Die aufrufende Datei nennt beim import den Namen und den Modulpfad. Lokale Hilfswerte müssen dadurch nicht als globale Variablen verfügbar sein.
Benannte Exporte und ein Standardexport sind unterschiedliche Schreibweisen. Die Importform muss zur exportierten Schnittstelle passen. Wer beim Update einer Bibliothek nur den Dateinamen austauscht, kann deshalb trotzdem einen Fehler bekommen. Prüfe auch, welche Namen das neue Modul tatsächlich bereitstellt.
Auf einen Blick
So startet ein Modul im Browser
Der Einstieg erfolgt beispielsweise mit einem script-Element, das type="module" und den Pfad zur Startdatei enthält. Von dort werden weitere Abhängigkeiten geladen. Relative Importe wie ./format.js beziehen sich auf die importierende Datei. Ein bloßer Paketname braucht im Browser eine passende Auflösung, etwa über eine Import Map oder einen Build.
Teste solche Dateien über einen lokalen Webserver. Beim direkten Öffnen per file:// können Sicherheitsregeln das Laden verhindern. Auf dem Server müssen außerdem passende JavaScript-Inhaltstypen und bei fremden Ursprüngen die notwendigen CORS-Freigaben stimmen.
Was Module bei der Pflege verbessern können
Ich würde Dateien nach nachvollziehbaren Aufgaben aufteilen: etwa eine Funktion für Datumsdarstellung und eine für das Öffnen der Navigation. Eine Änderung an der Darstellung soll nicht versehentlich die Navigation beeinflussen. Kleine, klare Schnittstellen machen solche Grenzen leichter prüfbar.
Module sind dabei kein automatisches Versprechen für weniger Downloadvolumen. Ein Build kann ungenutzten Code unter geeigneten Bedingungen entfernen; die tatsächliche Ausgabe muss trotzdem geprüft werden. Auch viele kleine Netzwerkabrufe sind eine Frage der konkreten Auslieferung. Entscheide anhand des Projekts, ob native Module ausreichen oder zusätzliche Build-Werkzeuge helfen.
Passend dazu: JavaScript · Bootstrap · Bootstrap 6 Alpha im Vergleich.
Codebeispiel aus der Praxis
Eine Funktion exportieren und importieren
Eigenes Beispiel mit zwei getrennten Dateien im selben Ordner. app.js wird über <script type="module" src="./app.js"></script> eingebunden.
// format.js
export function formatDate(value) {
return new Intl.DateTimeFormat("de-DE").format(value);
}
// app.js (separate Datei)
import { formatDate } from "./format.js";
console.log(formatDate(new Date()));Quellen und weiterführende Informationen
- Dokumentation JavaScript modules MDN Web Docs · Geprüft
- Dokumentation import MDN Web Docs · Geprüft
- Dokumentation export MDN Web Docs · Geprüft
