Hogyan működnek a modulok az ES Modules-ben?

Az ES Modules moduljai az importok és exportok statikus elemzésén alapulnak. A böngésző vagy a futtatókörnyezet JavaScript fájlokat elemzi, meghatározza a függőségeket a kód futtatása előtt, és függőségi gráfot hoz létre.

Működési elvek:

• Statikus elemzés: Az importokat és exportokat a kód futtatása előtt határozzák meg, ez optimalizálja a betöltést és korai hibakeresést tesz lehetővé.
• Egyértelmű kötés: Minden import egy adott exporthoz kötött egy másik modulban.
• Egyszeri példány: A modul csak egyszer fut le az első import során. Minden későbbi import ugyanarra a példányra hivatkozik.

Modul életciklusa:

1. Konstrukció: A modul forráskódját elemzik, azonosítják az importokat és exportokat. Egy modulburkot hoznak létre.
2. Betöltés: Minden importált modult betöltenek. Ha a függőség nincs gyorsítótárban, hálózati vagy fájlrendszer kérés történik.
3. Kötés: Az importokat és exportokat összekötik. A importált modulok változói és funkciói elérhetővé válnak a használathoz. Ha az import nem oldható meg, hiba keletkezik.
4. Végrehajtás: A modul kódja végrehajtódik. Minden exportált érték elérhetővé válik az importáló modulok számára.

Példák:

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

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

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

Különbségek a CommonJS-től:

Jellemző	ES Modules	CommonJS
Kötés	Statikus	Dinamikus
Betöltés	Aszinkron (a böngészőben)	Szinkron (alapértelmezett)
Exportálás	export kulcsszó	module.exports
Importálás	import kulcsszó	require függvény
Használat	Böngészőben és Node.js-ben (kísérleti)	Node.js-ben