Menene bambancin tsakanin ES modules da CommonJS?

Question

Accepted Answer

Waɗannan jiya tsakanin tsarin modules na JavaScript don rarrabawa jiya a cikin fayiloli.

## ES Modules (ESM) — daidaita zamani

```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) — tsarin gida na Node

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

## Babban bambanci

| | ES Modules | CommonJS |
|---|---|---|
| Syntax | `import`/`export` | `require`/`module.exports` |
| Loading | static, async | dynamic, synchronous |
| Iya tunanin | ✅ → tree-shaking | ❌ mafi wahala |
| Haɗin gida | live (read-only) | ƙoƙarin kopi |
| `this` a saman | `undefined` | `module.exports` |

**Static** yana nufin cewa shiryayyen ESM sun san-san a lokacin barcin jiya, wanda zai ba da damar masu yin jiya na **tree-shaking** (jillar abubuwan da ba a amfani da su). CommonJS `require` yana aiki ba tare da tsari ba (kana iya `require` a lokacin da aka umwaci), don haka ba za a iya bincika shi da sauƙi ba.

## Kunna ESM a Node

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

## Matsalar Interop

Ba za ka iya amfani da `require()` akan fakiti na ESM-kawai daga CommonJS; haɗa waɗu taji aikikin ɓarna. Shiryayyen ESM suma shine **haɗin gida mai kuzari** — idan mai kayarwa ya canza ƙima, malayan ƙima suna ganin sabon ƙima (CJS yana ba ka jiyya kopi).

## Me ya sa haka mai mahimmanci

ESM shine jiya gida (browser-native, tree-shakeable, top-level `await`).

Su gwammace don sabuwar jiya; fahimta CJS saboda yawancin jiya na Node har yanzu yana amfani da shi.

	ES Modules	CommonJS
Syntax	`import`/`export`	`require`/`module.exports`
Loading	static, async	dynamic, synchronous
Iya tunanin	✅ → tree-shaking	❌ mafi wahala
Haɗin gida	live (read-only)	ƙoƙarin kopi
`this` a saman	`undefined`	`module.exports`