Mi a különbség az ES modulok és a CommonJS között?

Question

Accepted Answer

Ezek a JavaScript két modulrendszere a kód fájlok között történő felosztásához.

## ES Modulok (ESM) — a modern szabvány

```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 örökségi rendszere

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

## Főbb különbségek

| | ES Modulok | CommonJS |
|---|---|---|
| Szintaxis | `import`/`export` | `require`/`module.exports` |
| Betöltés | static, async | dynamic, synchronous |
| Elemezhetô | ✅ → tree-shaking | ❌ nehezebb |
| Kötések | live (read-only) | másolt érték |
| `this` tetején | `undefined` | `module.exports` |

A **statikus** azt jelenti, hogy az ESM importok a parse időben ismertek, amely lehetővé teszi a bundlereknek a **tree-shaking** végrehajtását (fel nem használt exportok eldobása). A CommonJS `require` dinamikus (feltételesen `require` lehet), így nem lehet könnyen elemezni.

## ESM engedélyezése Node-ban

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

## Interop csapda

Nem lehet `require()` egy ESM-only csomagot CommonJS-ból; a kettő keverésének durva élei vannak. Az ESM importok szintén **élő kötések** — ha az exportőr megváltoztatja az értéket, az importőrök az új értéket látják (a CJS egy pillanatkép másolatot ad meg).

## Miért fontos ez

Az ESM a jövő (böngésző-natív, tree-shakeable, top-level `await`).

Általában használja az új kódhoz; értse meg a CJS-t, mert a Node ökoszisztéma nagy része még mindig azt használja.

	ES Modulok	CommonJS
Szintaxis	`import`/`export`	`require`/`module.exports`
Betöltés	static, async	dynamic, synchronous
Elemezhetô	✅ → tree-shaking	❌ nehezebb
Kötések	live (read-only)	másolt érték
`this` tetején	`undefined`	`module.exports`