Koja je razlika između ES modula i CommonJS-a?

Question

IT Interview Practice · Accepted Answer

To su dva JavaScript modula za dijeljenje koda u datotekama.

## ES Moduli (ESM) — moderni 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-ov naslijeđeni sustav

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

## Ključne razlike

| | ES Moduli | CommonJS |
|---|---|---|
| Sintaksa | `import`/`export` | `require`/`module.exports` |
| Učitavanje | static, async | dynamic, synchronous |
| Analizabilno | ✅ → tree-shaking | ❌ teže |
| Veze | live (read-only) | kopirana vrijednost |
| `this` na vrhu | `undefined` | `module.exports` |

**Statički** znači da su ESM importi poznati tijekom vremena parsiranja, što bundlerima omogućava **tree-shaking** (ispuštanje nekorištenih exporta). CommonJS `require` je dinamičan (možete uvjetno `require`), pa se ne može lako analizirati.

## Omogućavanje ESM-a u Node-u

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

## Interop zamka

Ne možete `require()` paket samo za ESM iz CommonJS-a; miješanje dva ima grubo rubove. ESM importi su također **živih veze** — ako izvoznik promijeni vrijednost, importeri vide novu vrijednost (CJS vam daje snapshot kopiju).

## Zašto je važno

ESM je budućnost (browser-native, tree-shakeable, top-level `await`).

Preporučujemo ga za novi kod; razumijevanja CJS jer velik dio Node ekosustva još uvijek ga koristi.

	ES Moduli	CommonJS
Sintaksa	`import`/`export`	`require`/`module.exports`
Učitavanje	static, async	dynamic, synchronous
Analizabilno	✅ → tree-shaking	❌ teže
Veze	live (read-only)	kopirana vrijednost
`this` na vrhu	`undefined`	`module.exports`

ES Moduli (ESM) — moderni standard

CommonJS (CJS) — Node-ov naslijeđeni sustav

Ključne razlike

Omogućavanje ESM-a u Node-u

Interop zamka

Zašto je važno

Povezana pitanja