Jaký je rozdíl mezi ES modules a CommonJS?

Question

Accepted Answer

Jedná se o dva moduly JavaScriptu pro rozdělení kódu do více souborů.

## ES Modules (ESM) — moderní standard

```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 starší systém

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

## Klíčové rozdíly

| | ES Modules | CommonJS |
|---|---|---|
| Syntaxe | `import`/`export` | `require`/`module.exports` |
| Načítání | statické, asynchronní | dynamické, synchronní |
| Analyzovatelné | ✅ → tree-shaking | ❌ obtížnější |
| Vazby | živé (pouze čtení) | zkopírovaná hodnota |
| `this` na vrcholu | `undefined` | `module.exports` |

**Statické** znamená, že importy ESM jsou známy v čase parsování, což umožňuje bundlérům provádět **tree-shaking** (odstranit nepoužívané exporty). CommonJS `require` je dynamický (můžete podmíněně `require`), takže se nedá tak snadno analyzovat.

## Povolení ESM v Node

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

## Gotcha interoperability

Nelze `require()` balíček pouze ESM z CommonJS; míchání těchto dvou má nevyřešené problémy. Importy ESM jsou také **živé vazby** — pokud exportér změní hodnotu, importéři vidí novou hodnotu (CJS vám dá kopii snímku).

## Proč na tom záleží

ESM je budoucnost (nativní pro prohlížeč, tree-shakeable, `await` na nejvyšší úrovni).

Volte ji pro nový kód; pochopte CJS, protože velká část ekosystému Node ji stále používá.

	ES Modules	CommonJS
Syntaxe	`import`/`export`	`require`/`module.exports`
Načítání	statické, asynchronní	dynamické, synchronní
Analyzovatelné	✅ → tree-shaking	❌ obtížnější
Vazby	živé (pouze čtení)	zkopírovaná hodnota
`this` na vrcholu	`undefined`	`module.exports`