Kako funkcionišu moduli u ES Modules?

Moduli u ES Modules rade na osnovu statičke analize uvoza i izvoza. Pregledač ili okruženje za izvršavanje parsira JavaScript fajlove, određuje zavisnosti između modula pre izvršavanja koda i kreira graf zavisnosti.

Principi rada:

• Statička analiza: Uvozi i izvozi se određuju pre izvršavanja koda, što omogućava optimizaciju učitavanja i rano otkrivanje grešaka.
• Jednoznačno povezivanje: Svaki uvoz je povezan sa određenim izvozom u drugom modulu.
• Jedinstveni primerak: Modul se izvršava samo jednom pri prvom uvozu. Svi naredni uvozi dobijaju referencu na isti primerak.

Životni ciklus modula:

1. Konstrukcija: Izvorni kod modula se parsira, identifikuju se uvozi i izvozi. Kreira se omotač modula.
2. Učitavanje: Učitavaju se svi uvozni moduli. Ako zavisnost nije keširana, vrši se zahtev prema mreži ili fajl sistemu.
3. Povezivanje: Uvozi i izvozi se povezuju. Promenljive i funkcije iz uvođenih modula postaju dostupne za korišćenje. Ako uvoz ne može biti rešen, baca se greška.
4. Izvršavanje: Kod modula se izvršava. Sve izvođene vrednosti postaju dostupne za module koji ih uvoze.

Primeri:

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

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

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

Razlike od CommonJS:

Osobina	ES Modules	CommonJS
Povezivanje	Statičko	Dinamičko
Učitavanje	Asinhrono (u pretraživaču)	Sinhrono (po defaultu)
Izvoz	export ključna reč	module.exports
Uvoz	import ključna reč	require funkcija
Upotreba	U pretraživaču i Node.js (eksperimentalno)	U Node.js-u