Как работят модулите в ES Modules?

Модулите в ES Modules работят въз основа на статичен анализ на импорти и експорти. Браузърът или средата за изпълнение парсират JavaScript файлове, определят зависимостите между модулите преди изпълнението на кода и създават граф на зависимостите.

Принципи на работа:

• Статичен анализ: Импортите и експортират се определят преди изпълнението на кода, което позволява оптимизация на зареждането и откриване на грешки в ранните етапи.
• Уникално свързване: Всеки импорт се свързва с конкретен експорти в друг модул.
• Единствен екземпляр: Модулът се изпълнява само веднъж при първия импорт. Всички следващи импорти получават препратка към същия екземпляр.

Цикъл на живот на модула:

1. Конструиране: Изходният код на модула се парсира, идентифицират се импортите и експорти. Създава се обвивка на модула.
2. Зареждане: Зареждат се всички импортирани модули. Ако зависимостта не е кеширана, се прави заявка към мрежата или файловата система.
3. Свързване: Импортите и експортират се свързват. Променливите и функциите от импортните модули стават достъпни за използване. Ако импортът не може да бъде разрешен, се изхвърля грешка.
4. Изпълнение: Кодът на модула се изпълнява. Всички експортирани стойности стават достъпни за импортните модули.

Примери:

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

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

console.log(name); // Изход: Alice
sayHello(); // Изход: Hello, Alice!

Разлики с CommonJS:

Характеристика	ES Modules	CommonJS
Свързване	Статично	Динамично
Зареждане	Асинхронно (в браузъра)	Синхронно (по подразбиране)
Експорт	export ключова дума	module.exports
Импорт	import ключова дума	require функция
Използване	В браузъра и Node.js (експериментално)	В Node.js