Hva er forskjellen mellom ES modules og CommonJS?

Question

Accepted Answer

Dette er JavaScripts to modulsystemer for å dele kode på tvers av filer.

## ES Modules (ESM) — standarden for moderne tid

```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 eldre system

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

## Viktige forskjeller

| | ES Modules | CommonJS |
|---|---|---|
| Syntax | `import`/`export` | `require`/`module.exports` |
| Innlasting | statisk, asynkron | dynamisk, synkron |
| Analyserbar | ✅ → tree-shaking | ❌ vanskeligere |
| Bindings | live (skrivebeskyttet) | en kopiert verdi |
| `this` på topp | `undefined` | `module.exports` |

**Statisk** betyr at ESM-importer er kjent under parsing, noe som lar bundlere gjøre **tree-shaking** (fjerne ubrukte eksporter). CommonJS `require` er dynamisk (du kan `require` betinget), så det kan ikke analyseres like enkelt.

## Aktivere ESM i Node

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

## Interop-fallgruve

Du kan ikke `require()` en ESM-only pakke fra CommonJS; blanding av de to har vanskelige aspekter. ESM-importer er også **live bindings** — hvis eksporteren endrer verdien, ser importørene den nye verdien (CJS gir deg en snapshot-kopi).

## Hvorfor det betyr noe

ESM er fremtiden (nettleserintern, tree-shakeable, top-level `await`).

Foretrekk det for ny kode; forstå CJS fordi mye av Node-økosystemet bruker det fortsatt.

	ES Modules	CommonJS
Syntax	`import`/`export`	`require`/`module.exports`
Innlasting	statisk, asynkron	dynamisk, synkron
Analyserbar	✅ → tree-shaking	❌ vanskeligere
Bindings	live (skrivebeskyttet)	en kopiert verdi
`this` på topp	`undefined`	`module.exports`