Ako fungujú moduly v ES Modules?

Moduly v ES Modules fungujú na základe statickej analýzy importov a exportov. Prehliadač alebo prostredie na spustenie analyzuje JavaScriptové súbory, určuje závislosti medzi modulmi pred vykonaním kódu a vytvára graf závislostí.

Princípy fungovania:

• Statická analýza: Importy a exporty sú určené pred vykonaním kódu, čo umožňuje optimalizovať načítanie a odhaliť chyby v skorých fázach.
• Jednoznačné spojenie: Každý import je spojený s konkrétnym exportom v inom module.
• Jednotná inštancia: Modul sa vykoná iba raz pri prvom importe. Všetky nasledujúce importy získavajú odkaz na tú istú inštanciu.

Životný cyklus modulu:

1. Konštrukcia: Zdrojový kód modulu sa analyzuje, identifikujú sa importy a exporty. Vytvára sa obal modulu.
2. Načítanie: Načítajú sa všetky importované moduly. Ak závislosť nie je v cache, vykoná sa požiadavka na sieť alebo súborový systém.
3. Spojenie: Importy a exporty sa spájajú. Premenné a funkcie z importovaných modulov sa stávajú dostupnými na použitie. Ak sa import nedá vyriešiť, vyvolá sa chyba.
4. Vykonanie: Kód modulu sa vykoná. Všetky exportované hodnoty sa stávajú dostupnými pre importujúce moduly.

Príklady:

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

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

console.log(name); // Výstup: Alice
sayHello(); // Výstup: Hello, Alice!

Rozdiely od CommonJS:

Vlastnosť	ES Modules	CommonJS
Spojenie	Statické	Dynamické
Načítanie	Asynchrónne (v prehliadači)	Synchronné (štandardne)
Exportovanie	export kľúčové slovo	module.exports
Importovanie	import kľúčové slovo	require funkcia
Použitie	V prehliadači a Node.js (experimentálne)	V Node.js