Что происходит при импортировании модуля?

Импортирование модулей в JavaScript

Процесс импортирования модуля — это сложный механизм, который включает несколько этапов: разбор кода, связывание зависимостей и выполнение. В JavaScript существуют две основные системы модулей: ESM (ECMAScript Modules) и CommonJS. Рассмотрим оба подхода.

ESM (ECMAScript Modules) — современный стандарт

Когда вы пишете import { foo } from './module.js', происходит следующее:

// module.js
export const foo = 42;
export function bar() { return 'hello'; }

// main.js
import { foo, bar } from './module.js';
console.log(foo); // 42

Этапы выполнения:

1. Parsing (Разбор) — интерпретатор анализирует код и создаёт модульный граф
2. Linking (Связывание) — ищет модули по пути, проверяет экспорты и импорты
3. Evaluation (Выполнение) — выполняет код модуля и заполняет значения экспортов

CommonJS (Node.js подход)

В Node.js используется require(), который работает синхронно:

// module.js
module.exports = {
  foo: 42,
  bar: function() { return 'hello'; }
};

// main.js
const { foo, bar } = require('./module.js');
console.log(foo); // 42

Отличие: require() выполняется синхронно и может использоваться условно, а import асинхронен и на верхнем уровне.

Жизненный цикл ESM модуля

// logger.js
console.log('Module loads');

export function log(msg) {
  console.log(msg);
}

// main.js
import { log } from './logger.js';
// Вывод: Module loads — выполняется при импорте!

log('Hello');
// Вывод: Hello

Важно: код модуля выполняется только один раз, результат кэшируется.

Кэширование модулей

// a.js
import { x } from './shared.js';

// b.js
import { x } from './shared.js'; // один и тот же экземпляр!

Оба файла получают ссылку на один объект модуля.

Динамический импорт

Для условного импорта используется import() как функция:

async function loadModule() {
  const module = await import('./heavy.js');
  module.init();
}

loadModule();

Это асинхронная операция, возвращающая Promise.

Циклические зависимости

Одна из сложных ситуаций — когда модули импортируют друг друга:

// a.js
import { b } from './b.js';
export const a = 'a';

// b.js
import { a } from './a.js';
export const b = 'b';

JavaScript решает это через неполное связывание.

Основные различия ESM vs CommonJS

• ESM: асинхронен, статический анализ, поддержка tree-shaking
• CommonJS: синхронен, динамический
• Современный выбор: ESM везде

Понимание процесса импортирования критично для отладки проблем с зависимостями.