Jaka jest różnica między ES modules a CommonJS?

Question

Accepted Answer

Są to dwa systemy modułów JavaScriptu do dzielenia kodu na pliki.

## Dlaczego to ważne

```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) — starszy system Node'a

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

## Kluczowe różnice

| | ES Modules | CommonJS |
|---|---|---|
| Składnia | `import`/`export` | `require`/`module.exports` |
| Ładowanie | statyczne, asynchroniczne | dynamiczne, synchroniczne |
| Analizable | ✅ → tree-shaking | ❌ trudniejsze |
| Bindings | live (read-only) | skopiowana wartość |
| `this` na górze | `undefined` | `module.exports` |

**Statyczne** oznacza, że importy ESM są znane w czasie parsowania, co pozwala bundlerom na **tree-shaking** (usunięcie nieużywanych eksportów). `require` CommonJS jest dynamiczny (możesz warunkowo `require`), więc nie da się go analizować tak łatwo.

## Włączanie ESM w Node

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

## Pułapka interoperacyjności

Nie możesz `require()` pakietu tylko ESM z CommonJS; mieszanie tych dwóch ma ostre krawędzie. Importy ESM to także **live bindings** — jeśli eksporter zmieni wartość, importerzy zobaczą nową wartość (CJS daje ci kopię snapshotu).

## Dlaczego to ważne

ESM to przyszłość (natywny dla przeglądarki, tree-shakeable, top-level `await`).

Preferuj go dla nowego kodu; rozumiej CJS, ponieważ duża część ekosystemu Node'a go wciąż używa.

	ES Modules	CommonJS
Składnia	`import`/`export`	`require`/`module.exports`
Ładowanie	statyczne, asynchroniczne	dynamiczne, synchroniczne
Analizable	✅ → tree-shaking	❌ trudniejsze
Bindings	live (read-only)	skopiowana wartość
`this` na górze	`undefined`	`module.exports`