Модули: зачем они нужны

Обычные скрипты на странице живут в одной комнате. Всё, что объявлено через var или function на верхнем уровне файла, попадает в общее глобальное пространство — и следующий подключённый файл видит эти имена и может их переписать.

var user = "Аня";
function greet() { console.log("Привет, " + user); }
var user = "робот"; // ниже на странице подключили ещё один скрипт
greet();

Ошибки при этом нет: язык честно выполнил то, что попросили. Но такой код невозможно собирать из кусков — стоит двум библиотекам выбрать имя config или init, и одна тихо ломает другую. Плюс к этому порядок тегов становится значимым: файл, которому нужна функция из соседнего файла, обязан быть подключён после него.

var APP = APP || {};
APP.cart = { items: [] };
APP.cart.items.push("кофе");
console.log(APP.cart.items.length);

Раз у функции есть своя область видимости — значит, файл можно целиком обернуть в функцию и тут же её вызвать. Такую конструкцию называют IIFE, немедленно вызываемое функциональное выражение. Наружу возвращают только то, что нужно другим.

const counter = (function () {
  let count = 0;
  return { next: () => ++count };
})();
console.log(counter.next());
console.log(counter.next());
console.log(typeof count === "undefined");

count снаружи не существует — до него нельзя дотянуться и нельзя случайно обнулить. Приём рабочий, и вы до сих пор встретите его в старых библиотеках. Но он не решает главного: зависимости по-прежнему передаются через глобальные переменные, и порядок подключения файлов приходится держать в голове.

Первый по-настоящему модульный формат в JavaScript появился на сервере. В Node.js файл получает объект module.exports, куда складывает всё публичное, а чужой код подключает функцией require("./math"). Никаких глобальных переменных: зависимость названа прямо в том месте, где нужна.

По сути require — обычная функция: она находит файл, выполняет его один раз, запоминает получившийся exports в кэше и возвращает. Если отбросить поиск файла и запуск, останется реестр модулей — вот он на четырёх строках, без магии.

const registry = {};
registry["math"] = { exports: { add: (a, b) => a + b } };
const math = registry["math"].exports; // примерно это и делает require
console.log(math.add(2, 3));

Браузер такого не умел: require работает синхронно, а тянуть файлы по сети синхронно нельзя. Поэтому появились сборщики — Browserify, затем webpack: они заранее склеивали дерево require в один файл. Отсюда и привычка современного фронтенда собирать проект перед выкладкой.

В 2015 году модули стали частью самого языка: ключевые слова export и import понимают и браузер, и Node.js. Синтаксис разберём в следующей статье, а сейчас важнее три свойства, которыми модуль отличается от обычного скрипта.

Первое — своя область видимости. Всё объявленное в файле принадлежит файлу. Чтобы отдать значение наружу, его нужно пометить export; чтобы получить чужое — написать import. Случайно затереть соседа больше нельзя.

Второе — строгий режим включён всегда. Писать "use strict" в начале файла не нужно, и отключить строгость невозможно. Присваивание необъявленной переменной сразу становится ошибкой, а не молчаливым созданием глобальной.

function insideModule() {
  "use strict"; // в модуле эта строка не нужна: он строгий по умолчанию
  total = 10; // забыли объявить переменную
}
try { insideModule(); } catch (err) { console.log(err.name); }

Третье — тело модуля выполняется один раз. Сколько бы файлов ни импортировали utils.js, код внутри него отработает единожды, а все импортирующие получат один и тот же готовый результат. Идея та же, что в кэше выше.

const cache = {};
function load(name, body) {
  if (!(name in cache)) cache[name] = body();
  return cache[name];
}
const body = () => { console.log("тело модуля выполнено"); return { n: 1 }; };
console.log(load("m", body) === load("m", body));

Браузеру нужно сказать, что перед ним не обычный скрипт: <script type="module" src="./main.js"></script>. Достаточно подключить только точку входа — остальные файлы браузер подтянет сам по цепочке import.

Такой скрипт не блокирует разбор страницы: он загружается параллельно и выполняется, когда HTML разобран, — как будто у него стоит defer. Поэтому модуль всегда видит готовую разметку, зато и результат его работы появляется чуть позже.

Открыли index.html двойным кликом — модули из файлов молчат. Им нужен http, даже на своей машине: запустите любой локальный сервер.

Файл модуля браузер загружает строже обычного скрипта: сверяет, откуда пришла страница и откуда файл. У страницы, открытой с диска, адрес начинается с file:///, сайта в нём нет, и файл модуля браузер считает чужим. Так поступают и Chrome 154, и Firefox 157 с настройками по умолчанию, причём молча: на самой странице ошибки не видно. Запустится с диска только модуль, написанный прямо внутри тега, без src и без import. Как устроен адрес страницы с диска, почему путь /style.css уводит там в корень диска и как одной командой запустить локальный сервер, разобрано в прологе — в разделе о ловушке file://.

const fakeImport = (name) => Promise.resolve({ hello: () => name + ": готов" });
fakeImport("editor").then((mod) => console.log(mod.hello()));
console.log("эта строка выполнится раньше");