Какая разница между ES modules и CommonJS?

Question

Accepted Answer

Это две системы модулей JavaScript для разделения кода между файлами.

## Почему это важно

```js
// import / export, used in browsers and modern Node
import { sum } from "./math.js";
import defaultThing from "./thing.js";
export const x = 1;
export default function () {};
```

## CommonJS (CJS) — устаревшая система Node

```js
const { sum } = require("./math");
module.exports = { x: 1 };
```

## Ключевые различия

| | ES Modules | CommonJS |
|---|---|---|
| Синтаксис | `import`/`export` | `require`/`module.exports` |
| Загрузка | статическая, асинхронная | динамическая, синхронная |
| Анализируемость | ✅ → tree-shaking | ❌ сложнее |
| Привязки | live (только для чтения) | скопированное значение |
| `this` в начале | `undefined` | `module.exports` |

**Статическая** означает, что импорты ESM известны во время парсинга, что позволяет бундлерам выполнять **tree-shaking** (удалять неиспользуемые экспорты). `require` CommonJS динамичен (можно `require` условно), поэтому его сложнее анализировать.

## Включение ESM в Node

```json
{ "type": "module" } // in package.json, or use the .mjs extension
```

## Подводный камень взаимодействия

Нельзя выполнить `require()` пакета только для ESM из CommonJS; смешивание этих двух имеет острые края. Импорты ESM также являются **live bindings** — если экспортер изменит значение, импортеры увидят новое значение (CJS дает вам копию снимка).

## Почему это важно

ESM — это будущее (встроен в браузер, tree-shakeable, top-level `await`).

Выбирайте его для нового кода; понимайте CJS, потому что большая часть экосистемы Node все еще его использует.

	ES Modules	CommonJS
Синтаксис	`import`/`export`	`require`/`module.exports`
Загрузка	статическая, асинхронная	динамическая, синхронная
Анализируемость	✅ → tree-shaking	❌ сложнее
Привязки	live (только для чтения)	скопированное значение
`this` в начале	`undefined`	`module.exports`