Mikä on ero ES-moduulien ja CommonJS:n välillä?

Question

Accepted Answer

Nämä ovat JavaScriptin kaksi moderni järjestelmää koodin jakamiseen useille tiedostoille.

## ES Modules (ESM) — moderni standardi

```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) — Noden perintöjärjestelmä

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

## Tärkeimmät erot

| | ES Modules | CommonJS |
|---|---|---|
| Syntaksi | `import`/`export` | `require`/`module.exports` |
| Lataus | staattinen, asynkroninen | dynaaminen, synkroninen |
| Analysoitavissa | ✅ → tree-shaking | ❌ vaikeampi |
| Sidokset | live (vain luku) | kopioitu arvo |
| `this` huipulla | `undefined` | `module.exports` |

**Staattinen** tarkoittaa, että ESM-tuonti tunnetaan jäsentelyaikana, mikä antaa bundlereille mahdollisuuden tehdä **tree-shaking** (poista käyttämättömät viennit). CommonJS `require` on dynaaminen (voit ehdollisesti `require`), joten sitä ei voi analysoida yhtä helposti.

## ESM:n aktivointi Nodessa

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

## Yhteensopivuuden sudenkuoppa

Et voi `require()` ESM-ainoastaan pakettia CommonJS:stä; näiden kahden sekoittaminen on raskasta. ESM-tuonnit ovat myös **live bindings** — jos viejä muuttaa arvoa, tuojat näkevät uuden arvon (CJS antaa sinulle tilannekuvan kopion).

## Miksi se on tärkeää

ESM on tulevaisuus (selaimen natiivia, tree-shakeable, huipputason `await`).

Suosi sitä uudelle koodille; ymmärrä CJS, koska suuri osa Node-ekosysteemistä käyttää sitä edelleen.

	ES Modules	CommonJS
Syntaksi	`import`/`export`	`require`/`module.exports`
Lataus	staattinen, asynkroninen	dynaaminen, synkroninen
Analysoitavissa	✅ → tree-shaking	❌ vaikeampi
Sidokset	live (vain luku)	kopioitu arvo
`this` huipulla	`undefined`	`module.exports`