Что такое 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. Благодаря этому браузер включает режим строгой работы с модулями, автоматически обрабатывает их как асинхронные скрипты и позволяет использовать все преимущества современного синтаксиса импорта и экспорта прямо в клиентской части веб-приложения без предварительной сборки.