Cum funcționează modulele în ES Modules?

Modulele în ES Modules funcționează pe baza unei analize statice a importurilor și exporturilor. Browserul sau mediul de execuție parsează fișierele JavaScript, determină dependențele dintre module înainte de a executa codul și creează un grafic de dependențe.

Principii de funcționare:

• Analiză statică: Importurile și exporturile sunt determinate înainte de executarea codului, ceea ce permite optimizarea încărcării și identificarea erorilor în faze incipiente.
• Legare univocă: Fiecare import se leagă de un export specific din alt modul.
• Instanță unică: Modulul este executat o singură dată la prima importare. Toate importurile ulterioare primesc o referință la aceeași instanță.

Ciclul de viață al modulului:

1. Construcție: Codul sursă al modulului este analizat, identificându-se importurile și exporturile. Se creează o carcasă a modulului.
2. Încărcare: Se încarcă toate modulele importate. Dacă dependența nu este în cache, se face o solicitare către rețea sau sistemul de fișiere.
3. Legare: Importurile și exporturile sunt legate. Variabilele și funcțiile din modulele importate devin disponibile pentru utilizare. Dacă importul nu poate fi rezolvat, se aruncă o eroare.
4. Executare: Codul modulului este executat. Toate valorile exportate devin disponibile pentru modulele care le importă.

Exemple:

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

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

console.log(name); // Afișare: Alice
sayHello(); // Afișare: Hello, Alice!

Diferențe față de CommonJS:

Caracteristică	ES Modules	CommonJS
Legare	Static	Dinamic
Încărcare	Asincronă (în browser)	Sincronă (implicit)
Export	cuvântul cheie export	module.exports
Import	cuvântul cheie import	require (funcție)
Utilizare	În browser și Node.js (experimental)	În Node.js