Vad är skillnaden mellan ES modules och CommonJS?

Question

Accepted Answer

Dessa är JavaScripts två modulsystem för att dela upp kod över flera filer.

## ES Modules (ESM) — den moderna standarden

```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 äldre system

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

## Viktiga skillnader

| | ES Modules | CommonJS |
|---|---|---|
| Syntax | `import`/`export` | `require`/`module.exports` |
| Laddning | statisk, asynkron | dynamisk, synkron |
| Analyserbar | ✅ → tree-shaking | ❌ svårare |
| Bindningar | live (skrivskyddad) | ett kopierat värde |
| `this` överst | `undefined` | `module.exports` |

**Statisk** betyder att ESM-importer är kända vid parse-tid, vilket låter bundlers göra **tree-shaking** (ta bort oanvända exporter). CommonJS `require` är dynamisk (du kan `require` villkorligt), så den kan inte analyseras lika enkelt.

## Aktivera ESM i Node

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

## Interop-gotcha

Du kan inte `require()` ett ESM-endast paket från CommonJS; att blanda de två har grova kanter. ESM-importer är också **live bindings** — om exportören ändrar värdet, ser importörer det nya värdet (CJS ger dig en snapshot-kopia).

## Varför det spelar roll

ESM är framtiden (webbläsarens inbyggda, tree-shakeable, top-level `await`).

Föredra det för ny kod; förstå CJS eftersom mycket av Node-ekosystemet fortfarande använder det.

	ES Modules	CommonJS
Syntax	`import`/`export`	`require`/`module.exports`
Laddning	statisk, asynkron	dynamisk, synkron
Analyserbar	✅ → tree-shaking	❌ svårare
Bindningar	live (skrivskyddad)	ett kopierat värde
`this` överst	`undefined`	`module.exports`