Jak działają moduły w ES Modules?

Moduły w ES Modules działają na podstawie statycznej analizy importów i eksportów. Przeglądarka lub środowisko wykonawcze analizuje pliki JavaScript, określa zależności między modułami przed wykonaniem kodu i tworzy wykres zależności.

Zasady działania:

• Analiza statyczna: Importy i eksporty są określane przed wykonaniem kodu, co pozwala zoptymalizować ładowanie i wykrywać błędy na wczesnym etapie.
• Jednoznaczne powiązanie: Każdy import jest powiązany z konkretnym eksportem w innym module.
• Pojedyncza instancja: Moduł jest wykonywany tylko raz przy pierwszym imporcie. Wszystkie kolejne importy odwołują się do tej samej instancji.

Cykl życia modułu:

1. Budowa: Kod źródłowy modułu jest analizowany, identyfikowane są importy i eksporty. Tworzona jest powłoka modułu.
2. Ładowanie: Ładowane są wszystkie importowane moduły. Jeśli zależność nie jest w pamięci podręcznej, wykonywane jest żądanie do sieci lub systemu plików.
3. Powiązanie: Importy i eksporty są powiązane. Zmienne i funkcje z importowanych modułów stają się dostępne do użycia. Jeśli import nie może zostać rozwiązany, rzucany jest błąd.
4. Wykonanie: Kod modułu jest wykonywany. Wszystkie eksportowane wartości stają się dostępne dla modułów importujących.

Przykłady:

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

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

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

Różnice od CommonJS:

Cecha	ES Modules	CommonJS
Powiązanie	Statyczne	Dynamiczne
Ładowanie	Asynchroniczne (w przeglądarce)	Synchroniczne (domyślnie)
Eksport	słowo kluczowe export	module.exports
Import	słowo kluczowe import	require funkcja
Użycie	W przeglądarce i Node.js (eksperymentalnie)	W Node.js