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

Question

Accepted Answer

Το Node υποστηρίζει **δύο συστήματα ενοτήτων**: **CommonJS (CJS)** — το αρχικό, χρησιμοποιώντας `require`/`module.exports` — και **ES Modules (ESM)** — το πρότυπο, χρησιμοποιώντας `import`/`export`. Διαφέρουν στη σύνταξη, τη συμπεριφορά φόρτωσης και τη διαλειτουργικότητα.

## CommonJS — το αρχικό του Node

```js
// math.js
function add(a, b) { return a + b; }
module.exports = { add };

// app.js
const { add } = require("./math"); // synchronous, runtime
```

## ES Modules — το πρότυπο

```js
// math.mjs (or .js with "type": "module")
export function add(a, b) { return a + b; }
export default something;

// app.mjs
import { add } from "./math.mjs"; // static, hoisted
```

## Κύριες διαφορές

```text
                 CommonJS              ES Modules
Syntax           require/module.exports import/export
Loading          synchronous, runtime  static, hoisted
Top-level await  no                    yes
Tree-shaking     hard                  yes (statically analyzable)
File extension   .cjs / .js (default)  .mjs / .js with "type":"module"
__dirname/__filename available         not available (use import.meta.url)
```

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

```json
// package.json
{ "type": "module" }  // now .js files are treated as ESM
```

Με εναλλακτικά χρησιμοποιήστε την επέκταση `.mjs` ρητά. Χωρίς αυτό, το Node χρησιμοποιεί ως προεπιλογή `.js` ως CommonJS.

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

```js
// ESM can import CommonJS:
import pkg from "some-cjs-lib"; // works (default import)

// CommonJS CANNOT require() a pure-ESM package (it's async):
const esm = require("esm-only-pkg"); // ❌ ERR_REQUIRE_ESM
// must use dynamic import: const esm = await import("esm-only-pkg");
```

Η τραχιά άκρη: Το CJS δεν μπορεί να `require()` πακέτα μόνο ESM — ένας συνηθισμένος πόνος μεταφοράς. Επίσης, σημειώστε ότι το ESM δεν έχει `__dirname` (χρησιμοποιήστε `import.meta.url`).

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

Η γνώση και των δύο συστημάτων είναι απαραίτητη για πραγματική εργασία Node: Το ESM είναι το μέλλον (πρότυπο, tree-shakeable, top-level await, ευθυγραμμισμένο με τον browser) και η σωστή επιλογή για νέα έργα, αλλά μεγάλο μέρος του οικοσυστήματος npm και ο υπάρχων κώδικας είναι CommonJS.

Η κατανόηση των διαφορών σύνταξης, του τρόπου ενεργοποίησης του ESM (`"type": "module"`), και των περιορισμών διαλειτουργικότητας (ειδικά ότι το CJS δεν μπορεί να απαιτεί ESM) αποτρέπει τη συνήθη σύγχυση και τα σφάλματα που προκύπτουν όταν τα ανακατεύουν.