Jak fungují moduly v ES Modules?

Moduly v ES Modules fungují na základě statické analýzy importů a exportů. Prohlížeč nebo prostředí spouštění analyzuje soubory JavaScript, určuje závislosti mezi moduly před spuštěním kódu a vytváří graf závislostí.

Principy fungování:

• Statická analýza: Importy a exporty jsou určeny před spuštěním kódu, což umožňuje optimalizovat načítání a odhalovat chyby v raných fázích.
• Jednoznačné spojení: Každý import je spojen s konkrétním exportem v jiném modulu.
• Jednotná instance: Modul se spouští pouze jednou při prvním importu. Všechny následující importy odkazují na stejnou instanci.

Životní cyklus modulu:

1. Konstrukce: Zdrojový kód modulu je analyzován, identifikují se importy a exporty. Vytváří se obal modulu.
2. Načítání: Načtou se všechny importované moduly. Pokud závislost není v cache, provede se požadavek na síť nebo souborový systém.
3. Spojení: Importy a exporty jsou spojeny. Proměnné a funkce z importovaných modulů jsou zpřístupněny k použití. Pokud nelze import vyřešit, je vyvolána chyba.
4. Spuštění: Kód modulu je spuštěn. Všechny exportované hodnoty jsou dostupné pro importující moduly.

Pří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!

Rozdíly od CommonJS:

Vlastnost	ES Modules	CommonJS
Spojení	Statické	Dynamické
Načítání	Asynchronní (v prohlížeči)	Synchronní (výchozí)
Exportování	klíčové slovo export	module.exports
Importování	klíčové slovo import	require funkce
Použití	V prohlížeči a Node.js (experimentální)	V Node.js