Как работают модули в 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); // Output: Alice
sayHello(); // Output: Hello, Alice!

Отличия от CommonJS: