В какой код компилируется модуль

В какой код компилируется модуль

Модули JavaScript/TypeScript компилируются в различные форматы кода в зависимости от конфигурации сборщика и целевой среды выполнения. Это критически важно понимать для оптимизации производительности приложения.

CommonJS

CommonJS — один из самых распространённых форматов, особенно в Node.js. Модуль компилируется в функцию-обёртку с синтаксисом require() и module.exports:

// Исходный код
export const add = (a, b) => a + b;
export default function multiply(a, b) {
  return a * b;
}

// Компилируется в CommonJS
var __defProp = Object.defineProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __toCommonJS = (mod) => __export(__newEnumerator(mod), mod);

var module_exports = {};
__export(module_exports, {
  default: () => multiply,
  add: () => add
});

const add = (a, b) => a + b;
function multiply(a, b) {
  return a * b;
}

module.exports = __toCommonJS(module_exports);

ECMAScript Modules (ESM)

Это современный стандарт, компилируется в import/export синтаксис. Сам по себе не требует преобразований, но может быть обработан бандлером:

// Исходный код и результат компиляции
export const add = (a, b) => a + b;
export default function multiply(a, b) {
  return a * b;
}

UMD (Universal Module Definition)

Унивёрсальный формат, работающий везде — в браузерах, Node.js и как глобальная переменная:

(function (global, factory) {
  typeof exports === object && typeof module !== undefined
    ? factory(exports)
    : typeof define === function && define.amd
    ? define([exports], factory)
    : (global = typeof globalThis !== undefined ? globalThis : global || self,
      factory(global.myModule = {}));
})(this, function (exports) {
  const add = (a, b) => a + b;
  function multiply(a, b) {
    return a * b;
  }
  
  exports.add = add;
  exports.default = multiply;
});

IIFE (Immediately Invoked Function Expression)

Самовызывающаяся функция — часто используется в браузерах для изоляции кода:

(function() {
  const add = (a, b) => a + b;
  function multiply(a, b) {
    return a * b;
  }
  
  window.myModule = { add, multiply };
})();

Влияние конфигурации на компиляцию

tsconfig.json в TypeScript определяет целевой формат через свойство module:

// ESNext — современный синтаксис
{
  "compilerOptions": {
    "module": "ESNext",
    "target": "ES2020"
  }
}

// CommonJS — для Node.js
{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "ES2020"
  }
}

// ES2015 — для старых браузеров
{
  "compilerOptions": {
    "module": "ES2015",
    "target": "ES2015"
  }
}

Webpack, Rollup, Vite также трансформируют код:

• Могут менять формат модулей
• Производят tree-shaking неиспользуемого кода
• Минифицируют финальный бандл
• Добавляют полифилы для старых браузеров

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

При разработке React/Next.js приложения обычно используется:

• Development: ESM с прямым импортом
• Production: код минифицируется и оборачивается в IIFE или CommonJS-подобную обёртку
• Библиотеки: публикуют несколько форматов (ESM, CommonJS, UMD)

Зачем это важно:

• Совместимость: разные окружения понимают разные форматы
• Производительность: ESM позволяет браузерам лучше оптимизировать код
• Размер бандла: правильный формат может уменьшить финальный размер
• Динамические импорты: import() компилируются в специальный синтаксис для ленивой загрузки

Выбор формата — критичен для соответствия целевой среде выполнения и требованиям проекта.