ES modules اور CommonJS میں کیا فرق ہے؟

Question

IT Interview Practice · Accepted Answer

یہ JavaScript کے دو ماڈیول سسٹم ہیں جو کوڈ کو فائلوں میں تقسیم کرتے ہیں۔

## ES Modules (ESM) — جدید معیار

```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) — Node کا پرانا نظام

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

## اہم فرق

| | ES Modules | CommonJS |
|---|---|---|
| Syntax | `import`/`export` | `require`/`module.exports` |
| Loading | static, async | dynamic, synchronous |
| Analyzable | ✅ → tree-shaking | ❌ harder |
| Bindings | live (read-only) | نقل کی گئی قدر |
| `this` at top | `undefined` | `module.exports` |

**Static** کا مطلب ہے کہ ESM درآمد parse کے وقت معلوم ہوتے ہیں، جو bundlers کو **tree-shaking** (استعمال نہ شدہ برآمدات کو حذف کرنا) کرنے دیتا ہے۔ CommonJS `require` متحرک ہے (آپ مشروط طور پر `require` کر سکتے ہیں)، لہذا یہ آسانی سے تجزیہ نہیں ہو سکتا۔

## Node میں ESM کو فعال کرنا

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

## Interop مسئلہ

آپ CommonJS سے ESM-صرف پیکج کو `require()` نہیں کر سکتے؛ دونوں کو ملانے میں مسائل ہیں۔ ESM درآمد بھی **live bindings** ہیں — اگر برآمد کنندہ قدر بدلتا ہے، تو درآمد کنندگان نئی قدر دیکھتے ہیں (CJS آپ کو ایک snapshot کاپی دیتا ہے)۔

## یہ کیوں اہم ہے

ESM مستقبل ہے (براؤزر-مقامی، tree-shakeable، top-level `await`)۔

نئے کوڈ کے لیے اسے ترجیح دیں؛ CJS کو سمجھیں کیونکہ Node کی ایکوسسٹم کا بیشتر حصہ ابھی بھی اس کا استعمال کر رہا ہے۔

	ES Modules	CommonJS
Syntax	`import`/`export`	`require`/`module.exports`
Loading	static, async	dynamic, synchronous
Analyzable	✅ → tree-shaking	❌ harder
Bindings	live (read-only)	نقل کی گئی قدر
`this` at top	`undefined`	`module.exports`

ES Modules (ESM) — جدید معیار

CommonJS (CJS) — Node کا پرانا نظام

اہم فرق

Node میں ESM کو فعال کرنا

Interop مسئلہ

یہ کیوں اہم ہے

متعلقہ سوالات