Когда использовать ES модули?

Когда использовать ES модули?

ES модули (ES Modules, ESM) — это стандартная система модулей в современном JavaScript, введённая в ES2015 (ES6). Они являются будущим веб-разработки и должны использоваться по умолчанию в новых проектах.

Что такое ES модули?

ES модули используют синтаксис import и export:

// math.js
export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b;
export default function subtract(a, b) {
  return a - b;
}

// app.js
import subtract, { add, multiply } from './math.js';

console.log(add(5, 3));        // 8
console.log(multiply(5, 3));   // 15
console.log(subtract(5, 3));   // 2

Когда использовать ES модули?

1. В современных браузерах (все проекты)

Все современные браузеры (Chrome 61+, Firefox 67+, Safari 10.1+, Edge 79+) полностью поддерживают ES модули. Это означает, что для новых проектов нет причин использовать CommonJS в браузере.

<!-- Загрузка ES модуля в браузер -->
<script type="module" src="app.js"></script>

<!-- Или инлайн -->
<script type="module">
  import { add } from './math.js';
  console.log(add(5, 3));
</script>

2. В Node.js (современные версии 16+)

Node.js 16+ полностью поддерживает ES модули. Чтобы использовать ESM в Node.js, нужно:

{
  "type": "module",
  "name": "my-app"
}

Или используй расширение .mjs:

// app.mjs
import http from 'http';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
console.log(__filename);

3. В инструментах сборки (Webpack, Vite, esbuild)

Все современные бандлеры ожидают ES модули как входной формат. Это стандарт де-факто:

// vite.config.js
import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [vue()],
});

4. В Next.js, Remix, React и других фреймворках

Все современные фреймворки используют ES модули:

// Next.js
import Image from 'next/image';
import { useState } from 'react';

export default function Home() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

Преимущества ES модулей

1. Статический анализ

Поскольку import и export используют статический синтаксис, инструменты могут анализировать код без выполнения:

// Это работает — инструменты знают, что импортируется
import { add } from './math.js';

// Это проблема — динамический импорт (ниже), требует анализа
const module = dynamicPath ? './math.js' : './calc.js';
import(module);

2. Tree-shaking (удаление мёртвого кода)

Бандлеры могут удалять неиспользуемый код благодаря статическому анализу:

// math.js
export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b; // не используется
export const divide = (a, b) => a / b;   // не используется

// app.js
import { add } from './math.js'; // импортируем только add

// При сборке multiply и divide будут удалены

3. Лучшая производительность

ЭS модули загружаются параллельно и могут быть распределены на несколько файлов для ленивой загрузки:

// Dynamic import — асинхронная загрузка
const module = await import('./heavy-module.js');

4. Стандартность и будущность

ES модули — это официальный стандарт ECMAScript, одобренный всеми браузерами и инструментами. CommonJS — устаревший де-факто стандарт для Node.js.

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

ES модули лучше обрабатывают циклические зависимости благодаря живым привязкам:

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

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

// Это работает! (В CommonJS это проблема)

Сравнение с CommonJS

// CommonJS (старый стандарт)
const math = require('./math.js');
module.exports = { add };

// ES Modules (современный стандарт)
import { add } from './math.js';
export { add };

Почему ES модули лучше:

• Синтаксис чище и проще
• Поддержка в браузерах нативна
• Tree-shaking и оптимизация
• Асинхронная загрузка из коробки
• Лучшая отладка

Когда использовать CommonJS?

CommonJS имеет смысл только в очень специфических случаях:

// Старые версии Node.js (< 16)
// Динамическая загрузка плагинов (require.resolve)
const pluginPath = require.resolve(`./plugins/${pluginName}`);
const plugin = require(pluginPath);

Но даже это можно заменить динамическим импортом:

const plugin = await import(`./plugins/${pluginName}.js`);

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

Для ленивой загрузки используй динамический импорт (работает везде):

// Статический импорт — загружается сразу
import { heavyFunction } from './heavy.js';

// Динамический импорт — загружается по требованию
button.addEventListener('click', async () => {
  const { heavyFunction } = await import('./heavy.js');
  heavyFunction();
});

Выводы

Правило простое: используй ES модули везде и всегда.

Это означает:

• Новые браузерные проекты — ES модули
• Node.js 16+ — ES модули
• Фреймворки (Next.js, React, Vue) — уже используют ES модули
• Для совместимости со старыми браузерами/Node.js используй бандлер для трансляции

ES модули — это настоящее и будущее JavaScript. CommonJS — это прошлое.