Wie funktionieren Module in ES Modules?

Module in ES Modules arbeiten auf Basis einer statischen Analyse von Importen und Exporten. Der Browser oder die Laufzeitumgebung parst JavaScript-Dateien, bestimmt die Abhängigkeiten zwischen den Modulen vor der Ausführung des Codes und erstellt ein Abhängigkeitsdiagramm.

Funktionsprinzipien:

• Statische Analyse: Importe und Exporte werden vor der Ausführung des Codes bestimmt, was die Ladezeit optimiert und Fehler frühzeitig erkennt.
• Eindeutige Verknüpfung: Jeder Import ist mit einem bestimmten Export in einem anderen Modul verbunden.
• Einzelne Instanz: Das Modul wird nur einmal bei der ersten Importierung ausgeführt. Alle nachfolgenden Importe erhalten eine Referenz auf dieselbe Instanz.

Lebenszyklus des Moduls:

1. Konstruktion: Der Quellcode des Moduls wird geparst, Importe und Exporte werden erkannt. Es wird eine Modulhülle erstellt.
2. Laden: Alle importierten Module werden geladen. Wenn die Abhängigkeit nicht im Cache ist, erfolgt eine Anfrage an das Netzwerk oder das Dateisystem.
3. Verknüpfung: Importe und Exporte werden verknüpft. Variablen und Funktionen aus importierten Modulen werden zugänglich gemacht. Wenn eine Importierung nicht aufgelöst werden kann, wird ein Fehler ausgelöst.
4. Ausführung: Der Code des Moduls wird ausgeführt. Alle exportierten Werte werden für die importierenden Module zugänglich.

Beispiele:

// moduleA.js
export const name = 'Alice';
export function sayHello() {
  console.log(`Hello, ${name}!`);
}

// moduleB.js
import { name, sayHello } from './moduleA.js';

console.log(name); // Ausgabe: Alice
sayHello(); // Ausgabe: Hello, Alice!

Unterschiede zu CommonJS:

Eigenschaft	ES Modules	CommonJS
Verknüpfung	Statisch	Dynamisch
Laden	Asynchron (im Browser)	Synchron (standardmäßig)
Export	export Schlüsselwort	module.exports
Import	import Schlüsselwort	require Funktion
Verwendung	Im Browser und Node.js (experimentell)	In Node.js