В чём разница между ESM и CommonJS?

Основные различия между ESM и CommonJS

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

Синтаксис и загрузка

ESM использует ключевые слова import и export, а CommonJS — require() и module.exports. ESM загружает модули асинхронно, что позволяет выполнять статический анализ зависимостей на этапе компиляции. CommonJS загружает модули синхронно, что может блокировать выполнение кода.

// ESM
import { sum } from './math.js';
export const result = sum(1, 2);

// CommonJS
const { sum } = require('./math');
module.exports = { result: sum(1, 2) };

Статический vs динамический импорт

ESM поддерживает только статический импорт на верхнем уровне, что позволяет инструментам сборки (например, Webpack) оптимизировать код (tree shaking). CommonJS позволяет динамически подключать модули в любом месте кода, что удобно для условной загрузки, но затрудняет статический анализ.

// Динамический импорт в ESM
if (condition) {
  const module = await import('./module.js');
}

// Динамический импорт в CommonJS
if (condition) {
  const module = require('./module');
}

Поддержка и окружение

ESM поддерживается во всех современных браузерах и в Node.js (начиная с версии 12). CommonJS работает только в Node.js. Для использования ESM в Node.js необходимо указать "type": "module" в package.json или использовать расширение .mjs.

Вывод

ESM предпочтителен для новых проектов благодаря стандартизации, асинхронной загрузке и поддержке tree shaking. CommonJS остаётся актуальным для legacy проектов и сред, где требуется динамическая загрузка модулей.