Quelle est la différence entre les ES modules et CommonJS ?

Question

Accepted Answer

Ce sont les deux systèmes de modules de JavaScript pour diviser le code sur plusieurs fichiers.

## ES Modules (ESM) — la norme moderne

```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) — le système hérité de Node

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

## Différences clés

| | ES Modules | CommonJS |
|---|---|---|
| Syntaxe | `import`/`export` | `require`/`module.exports` |
| Chargement | statique, asynchrone | dynamique, synchrone |
| Analysable | ✅ → tree-shaking | ❌ plus difficile |
| Liaisons | live (lecture seule) | valeur copiée |
| `this` en haut | `undefined` | `module.exports` |

**Statique** signifie que les importations ESM sont connues au moment de l'analyse, ce qui permet aux bundlers de faire du **tree-shaking** (supprimer les exports non utilisés). CommonJS `require` est dynamique (vous pouvez `require` conditionnellement), il ne peut donc pas être analysé aussi facilement.

## Activation d'ESM dans Node

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

## Piège d'interopérabilité

Vous ne pouvez pas `require()` un paquet ESM uniquement depuis CommonJS ; mélanger les deux a des aspects délicats. Les importations ESM sont également des **liaisons live** — si l'exportateur modifie la valeur, les importateurs voient la nouvelle valeur (CJS vous donne une copie snapshot).

## Pourquoi c'est important

ESM est l'avenir (natif du navigateur, tree-shakeable, `await` au niveau supérieur).

Préférez-le pour le nouveau code ; comprenez CJS car une grande partie de l'écosystème Node l'utilise toujours.

	ES Modules	CommonJS
Syntaxe	`import`/`export`	`require`/`module.exports`
Chargement	statique, asynchrone	dynamique, synchrone
Analysable	✅ → tree-shaking	❌ plus difficile
Liaisons	live (lecture seule)	valeur copiée
`this` en haut	`undefined`	`module.exports`