Ποια είναι η διαφορά μεταξύ ES modules και CommonJS;

Question

Accepted Answer

Αυτά είναι τα δύο συστήματα ενοτήτων του JavaScript για διαίρεση κώδικα σε αρχεία.

## ES Modules (ESM) — το σύγχρονο πρότυπο

```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 | ❌ δυσκολότερο |
| Δεσμεύσεις | ζωντανές (μόνο ανάγνωση) | αντιγραμμένη τιμή |
| `this` στην κορυφή | `undefined` | `module.exports` |

**Στατικό** σημαίνει ότι οι εισαγωγές ESM είναι γνωστές κατά την ώρα ανάλυσης, που επιτρέπει στους bundler να κάνουν **tree-shaking** (διαγραφή αχρησίμοτων εξαγωγών). Το CommonJS `require` είναι δυναμικό (μπορείτε να κάνετε υπό όρους `require`), οπότε δεν μπορεί να αναλυθεί τόσο εύκολα.

## Ενεργοποίηση ESM στο Node

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

## Παγίδα διαλειτουργικότητας

Δεν μπορείτε να `require()` ένα πακέτο ESM-only από το CommonJS· η ανάμιξη των δύο έχει δύσκολες άκρες. Οι εισαγωγές ESM είναι επίσης **ζωντανές δεσμεύσεις** — εάν ο εξαγωγέας αλλάξει την τιμή, οι εισαγωγείς βλέπουν την νέα τιμή (το CJS σας δίνει ένα αντίγραφο στιγμιότυπο).

## Γιατί έχει σημασία

Το ESM είναι το μέλλον (ενσωματωμένο στον περιηγητή, tree-shakeable, `await` ανατ επιπέδου).

Προτιμήστε το για νέο κώδικα· κατανοήστε το CJS γιατί μεγάλο μέρος του οικοσυστήματος Node το χρησιμοποιεί ακόμη.

	ES Modules	CommonJS
Σύνταξη	`import`/`export`	`require`/`module.exports`
Φόρτωση	στατικό, ασύγχρονο	δυναμικό, σύγχρονο
Αναλύσιμο	✅ → tree-shaking	❌ δυσκολότερο
Δεσμεύσεις	ζωντανές (μόνο ανάγνωση)	αντιγραμμένη τιμή
`this` στην κορυφή	`undefined`	`module.exports`