Wat is het verschil tussen ES modules en CommonJS?

Question

Accepted Answer

Dit zijn twee JavaScript modulsystemen voor het splitsen van code over bestanden.

## ES Modules (ESM) — de moderne standaard

```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's oudere systeem

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

## Belangrijkste verschillen

| | ES Modules | CommonJS |
|---|---|---|
| Syntaxis | `import`/`export` | `require`/`module.exports` |
| Laden | static, async | dynamisch, synchroon |
| Analyseerbaar | ✅ → tree-shaking | ❌ moeilijker |
| Bindingen | live (alleen-lezen) | gekopieerde waarde |
| `this` bovenaan | `undefined` | `module.exports` |

**Static** betekent dat ESM imports bekend zijn op parsetijd, wat bundlers in staat stelt **tree-shaking** te doen (ongebruikte exports verwijderen). CommonJS `require` is dynamisch (je kunt voorwaardelijk `require`), dus het is moeilijker te analyseren.

## ESM inschakelen in Node

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

## Interop lastigheid

Je kunt geen ESM-only pakket met `require()` laden vanuit CommonJS; het mengen van beide heeft ruwe randen. ESM imports zijn ook **live bindings** — als de exporter de waarde verandert, zien importers de nieuwe waarde (CJS geeft je een snapshotkopie).

## Waarom het belangrijk is

ESM is de toekomst (browser-native, tree-shakeable, top-level `await`).

Geef het de voorkeur voor nieuwe code; begrijp CJS omdat veel van het Node-ecosysteem het nog steeds gebruikt.

	ES Modules	CommonJS
Syntaxis	`import`/`export`	`require`/`module.exports`
Laden	static, async	dynamisch, synchroon
Analyseerbaar	✅ → tree-shaking	❌ moeilijker
Bindingen	live (alleen-lezen)	gekopieerde waarde
`this` bovenaan	`undefined`	`module.exports`