QUESTION: Що таке ES модулі?
Сучасна екосистема JavaScript базується на стандартах модульності, серед яких особливе місце займають ES модулі. Це офіційний стандарт для організації та повторного використання коду в JavaScript, який підтримується як сучасними браузерами, так і середовищем Node.js. Головна особливість цього підходу полягає в тому, що кожен файл розглядається як окремий ізольований модуль зі своєю власною областю видимості. Для того щоб поділитися функціоналом з іншими частинами додатка, розробники використовують різні види експорту. Наприклад, іменний експорт дозволяє вивантажити кілька змінних або функцій з одного файлу, використовуючи конструкцію виду export const x = 1, а для експорту за замовчуванням застосовується синтаксис export default fn, який зазвичай використовується для основного компонента або функції модуля.
У свою чергу, для підключення створених модулів в інших частинах програми застосовуються механізми імпорту. Для отримання конкретних іменованих елементів використовується деструктуризація в момент імпорту, наприклад, import {x} from './module'. Якщо ж виникає необхідність імпортувати весь функціонал модуля разом у вигляді єдиного об'єкта, використовується зірковий імпорт: import * as M from './module', після чого всі експорти сутності стають доступними як властивості об'єкта M. Найважливішою характеристикою ES модулів є статичні імпорти. Це означає, що структура залежностей між файлами визначається і аналізується компілятором ще до виконання самого коду, на етапі синтаксичного розбору. Такий підхід дозволяє інструментам збирання та браузерам заздалегідь розуміти, які файли знадобляться для роботи додатка.
Щоб браузер коректно опрацював такі модулі при прямій завантаженні HTML-сторінки, необхідно явно вказати тип скрипта в тезі. Для цього використовується атрибут type='module' в HTML, наприклад, у вигляді конструкції script type='module' src='main.js' /script. завдяки цьому браузер включає режим суворої роботи з модулями, автоматично опрацьовує їх як асинхронні скрипти і дозволяє використовувати всі переваги сучасного синтаксису імпорту та експорту прямо в клієнтській частині вебдодатка без попереднього збирання.