Hoe werken modules in ES Modules?

De modules in ES Modules werken op basis van een statische analyse van importen en exporten. De browser of de uitvoeromgeving parseert JavaScript-bestanden, bepaalt de afhankelijkheden tussen modules voordat de code wordt uitgevoerd en maakt een afhankelijkheidsdiagram.

Werking principes:

• Statische analyse: Importen en exporten worden bepaald voordat de code wordt uitgevoerd, wat het laden optimaliseert en fouten in een vroeg stadium opspoort.
• Eenduidige koppeling: Elke import wordt gekoppeld aan een specifieke export in een andere module.
• Enkele instantie: De module wordt slechts één keer uitgevoerd bij de eerste import. Alle volgende imports krijgen een verwijzing naar diezelfde instantie.

Levenscyclus van de module:

1. Constructie: De broncode van de module wordt geparsed, importen en exporten worden geïdentificeerd. Er wordt een modulehuls gemaakt.
2. Laden: Alle geïmporteerde modules worden geladen. Als de afhankelijkheid niet in de cache staat, wordt een netwerk- of bestandssysteemverzoek gedaan.
3. Koppeling: Importen en exporten worden gekoppeld. Variabelen en functies uit geïmporteerde modules worden beschikbaar gesteld voor gebruik. Als de import niet kan worden opgelost, wordt een fout gegenereerd.
4. Uitvoering: De code van de module wordt uitgevoerd. Alle geëxporteerde waarden worden beschikbaar voor de importerende modules.

Voorbeelden:

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

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

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

Verschillen met CommonJS:

Kenmerk	ES Modules	CommonJS
Koppeling	Statisch	Dynaamisch
Laden	Asynchroon (in de browser)	Synchroon (standaard)
Export	export sleutelwoord	module.exports
Import	import sleutelwoord	require functie
Gebruik	In browser en Node.js (experimenteel)	In Node.js