Hvad er forskellen mellem ES modules og CommonJS?

Question

Accepted Answer

Dette er JavaScripts to modulsystemer til at opdele kode på tværs af filer.

## ES Modules (ESM) — den moderne standard

```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) — Nodes arv system

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

## Vigtige forskelle

| | ES Modules | CommonJS |
|---|---|---|
| Syntaks | `import`/`export` | `require`/`module.exports` |
| Indlæsning | statisk, asynkron | dynamisk, synkron |
| Analyserbar | ✅ → tree-shaking | ❌ sværere |
| Bindinger | live (læsbar) | kopieret værdi |
| `this` øverst | `undefined` | `module.exports` |

**Statisk** betyder, at ESM-importer er kendt ved parse-tid, hvilket lader bundlere lave **tree-shaking** (fjern ubrugte exports). CommonJS `require` er dynamisk (du kan betinget `require`), så det kan ikke analyseres så let.

## Aktivering af ESM i Node

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

## Interop faldegruber

Du kan ikke `require()` en ESM-kun pakke fra CommonJS; blanding af de to har grove kanter. ESM-importer er også **live bindings** — hvis eksportøren ændrer værdien, ser importørerne den nye værdi (CJS giver dig en snapshot-kopi).

## Hvorfor det betyder noget

ESM er fremtiden (browserindfødt, tree-shakeable, top-level `await`).

Fortrins det til ny kode; forstå CJS, fordi meget af Node-økosystemet stadig bruger det.

	ES Modules	CommonJS
Syntaks	`import`/`export`	`require`/`module.exports`
Indlæsning	statisk, asynkron	dynamisk, synkron
Analyserbar	✅ → tree-shaking	❌ sværere
Bindinger	live (læsbar)	kopieret værdi
`this` øverst	`undefined`	`module.exports`