Чӣ гуна модулҳо дар 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