Was ist der Unterschied zwischen ES modules und CommonJS?

Question

Accepted Answer

Dies sind JavaScripts zwei Modulsysteme zum Aufteilen von Code auf mehrere Dateien.

## ES Modules (ESM) — der 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 Altsystem

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

## Wichtigste Unterschiede

| | ES Modules | CommonJS |
|---|---|---|
| Syntax | `import`/`export` | `require`/`module.exports` |
| Laden | statisch, asynchron | dynamisch, synchron |
| Analysierbar | ✅ → tree-shaking | ❌ schwieriger |
| Bindungen | live (schreibgeschützt) | kopierter Wert |
| `this` oben | `undefined` | `module.exports` |

**Statisch** bedeutet, dass ESM-Importe zur Parse-Zeit bekannt sind, was Bundlern **tree-shaking** (ungenutzte Exports entfernen) ermöglicht. CommonJS `require` ist dynamisch (du kannst bedingt `require`), daher kann es nicht so leicht analysiert werden.

## ESM in Node aktivieren

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

## Interop-Fallstricke

Du kannst ein ESM-only-Paket aus CommonJS nicht `require()`; das Mischen beider hat raue Kanten. ESM-Importe sind auch **live bindings** — wenn der Exporteur den Wert ändert, sehen Importeure den neuen Wert (CJS gibt dir eine Snapshot-Kopie).

## Warum es wichtig ist

ESM ist die Zukunft (browsernativ, tree-shakeable, Top-Level `await`).

Bevorzuge es für neuen Code; verstehe CJS, weil viel des Node-Ökosystems es noch verwendet.

	ES Modules	CommonJS
Syntax	`import`/`export`	`require`/`module.exports`
Laden	statisch, asynchron	dynamisch, synchron
Analysierbar	✅ → tree-shaking	❌ schwieriger
Bindungen	live (schreibgeschützt)	kopierter Wert
`this` oben	`undefined`	`module.exports`