Kuna tofauti gani kati ya ES modules na CommonJS?

Question

Accepted Answer

Hizi ni mifumo miwili ya moduli ya JavaScript kwa kugawanya msimbo katika faili nyingi.

## ES Modules (ESM) — kiwango kisichodiwa

```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) — mfumo wa zamani wa Node

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

## Tofauti muhimu

| | ES Modules | CommonJS |
|---|---|---|
| Sintaksia | `import`/`export` | `require`/`module.exports` |
| Kupakia | tuli, asinkroni | kina, sinkroni |
| Inaweza kuchambuliwa | ✅ → tree-shaking | ❌ ngumu zaidi |
| Viungo | hai (soma tu) | thamani iliyonakiliwa |
| `this` juu | `undefined` | `module.exports` |

**Tuli** inamaanisha kuwa uingizaji wa ESM unajulikana wakati wa parse, ambayo inaruhusu bundlers kufanya **tree-shaking** (ondoa uwasilisho usiotumika). CommonJS `require` ni kina (unaweza `require` kwa masharti), kwa hiyo haiwezi kuchambuliwa kwa urahisi.

## Kuwezesha ESM katika Node

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

## Gotcha ya interop

Huwezi `require()` pakiti ya ESM-pekee kutoka CommonJS; kuchanganya hizo mbili kuna matatizo. ESM imports pia ni **viungo hai** — ikiwa mwasilisaji anabadilisha thamani, wanouingiza huona thamani mpya (CJS inakupa nakili ya snapshot).

## Kwa nini ni muhimu

ESM ni sababu ya baadaye (asilia ya kivinjari, inaweza kutumia tree-shaking, `await` kwa kiwango cha juu).

Pendekeza kwa msimbo mpya; elewa CJS kwa sababu sehemu kubwa ya kawaida ya Node bado inatumia hiyo.

	ES Modules	CommonJS
Sintaksia	`import`/`export`	`require`/`module.exports`
Kupakia	tuli, asinkroni	kina, sinkroni
Inaweza kuchambuliwa	✅ → tree-shaking	❌ ngumu zaidi
Viungo	hai (soma tu)	thamani iliyonakiliwa
`this` juu	`undefined`	`module.exports`