Qual è la differenza tra ES modules e CommonJS?

Question

Accepted Answer

Questi sono due sistemi di moduli JavaScript per dividere il codice tra file.

## ES Modules (ESM) — lo standard moderno

```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) — il sistema legacy di Node

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

## Differenze chiave

| | ES Modules | CommonJS |
|---|---|---|
| Sintassi | `import`/`export` | `require`/`module.exports` |
| Caricamento | static, async | dynamic, synchronous |
| Analizzabile | ✅ → tree-shaking | ❌ più difficile |
| Binding | live (read-only) | valore copiato |
| `this` in alto | `undefined` | `module.exports` |

**Statico** significa che gli import ESM sono noti al momento del parse, il che permette ai bundler di fare **tree-shaking** (eliminare gli export non utilizzati). CommonJS `require` è dinamico (puoi `require` condizionalmente), quindi non può essere facilmente analizzato.

## Abilitazione di ESM in Node

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

## Insidia dell'interop

Non puoi `require()` un pacchetto solo ESM da CommonJS; mescolare i due ha bordi irregolari. Gli import ESM sono anche **binding live** — se l'esportatore cambia il valore, gli importatori vedono il nuovo valore (CJS ti dà una copia snapshot).

## Perché è importante

ESM è il futuro (browser-native, tree-shakeable, top-level `await`).

Preferiscilo per il nuovo codice; comprendi CJS perché gran parte dell'ecosistema di Node lo usa ancora.

	ES Modules	CommonJS
Sintassi	`import`/`export`	`require`/`module.exports`
Caricamento	static, async	dynamic, synchronous
Analizzabile	✅ → tree-shaking	❌ più difficile
Binding	live (read-only)	valore copiato
`this` in alto	`undefined`	`module.exports`