ما الفرق بين 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 |
|---|---|---|
| الصيغة | `import`/`export` | `require`/`module.exports` |
| التحميل | ثابت، غير متزامن | ديناميكي، متزامن |
| قابل للتحليل | ✅ → tree-shaking | ❌ أصعب |
| الربط | مباشر (قراءة فقط) | قيمة مسخوخة |
| `this` في الأعلى | `undefined` | `module.exports` |

**الثابت** يعني أن استيراد ESM معروف في وقت التحليل، مما يسمح لأدوات التجميع بـ **tree-shaking** (حذف الصادرات غير المستخدمة). `require` في CommonJS ديناميكي (يمكنك `require` بشكل مشروط)، لذا لا يمكن تحليله بسهولة.

## تفعيل ESM في Node

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

## مشكلة التوافق

لا يمكنك `require()` حزمة ESM فقط من CommonJS؛ الخلط بينهما له حواف خشنة. استيراد ESM أيضًا **روابط مباشرة** — إذا غير المُصدِّر القيمة، يرى المستوردون القيمة الجديدة (CJS يعطيك نسخة لقطة).

## لماذا يهم

ESM هو المستقبل (أصلي في المتصفح، tree-shakeable، `await` على المستوى الأعلى).

فضّل ESM للكود الجديد؛ افهم CommonJS لأن الكثير من نظام Node البيئي لا يزال يستخدمه.

	ES Modules	CommonJS
الصيغة	`import`/`export`	`require`/`module.exports`
التحميل	ثابت، غير متزامن	ديناميكي، متزامن
قابل للتحليل	✅ → tree-shaking	❌ أصعب
الربط	مباشر (قراءة فقط)	قيمة مسخوخة
`this` في الأعلى	`undefined`	`module.exports`

ES Modules (ESM) — المعيار الحديث

CommonJS (CJS) — نظام Node الموروث

الفروقات الرئيسية

تفعيل ESM في Node

مشكلة التوافق

لماذا يهم

أسئلة ذات صلة