ES modules અને CommonJS વચ્ચેનો તફાવત શું છે?

Question

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` |
| લોડિંગ | static, async | dynamic, synchronous |
| વિશ્લેષણયોગ્ય | ✅ → tree-shaking | ❌ મુશ્કેલ |
| બંધનો | live (read-only) | નકલ કરેલ મૂલ્ય |
| `this` ટોચ પર | `undefined` | `module.exports` |

**Static** માટલે ESM આયાત પાર્સ સમયે જાણીતા છે, જે બંડલર્સને **tree-shaking** (અપ્રયુક્ત નિકાસ છોડી દેવું) કરવા દે છે. CommonJS `require` ગતિશીલ છે (તમે શરતી રીતે `require` કરી શકો છો), તેથી તેનું તરત સમાધાન કરવું મુશ્કેલ છે.

## Node માં ESM સક્ષમ કરવું

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

## ઇન્ટરઓપ મુશ્કેલી

તમે CommonJS માંથી ESM-માત્ર પેકેજને `require()` કરી શકતા નથી; બંનેને મિશ્રણ કરવામાં અસ્પષ્ટ ધાર છે. ESM આયાત પણ **જીવંત બંધનો** છે — જો નિર્યાતક મૂલ્ય બદલે તો આમદાનીકર્તાઓ નવું મૂલ્ય જુએ છે (CJS તમને સ્નેપશોટ નકલ આપે છે).

## શા માટે તેનું મહત્વ છે

ESM ભવિષ્ય છે (browser-native, tree-shakeable, top-level `await`).

નવા કોડ માટે તેને પ્રાધાન્ય આપો; CJS સમજો કારણ કે Node ઇકોસિસ્ટમનો મોટો ભાગ હજી તેનો ઉપયોગ કરે છે.

	ES Modules	CommonJS
સિન્ટેક્સ	`import`/`export`	`require`/`module.exports`
લોડિંગ	static, async	dynamic, synchronous
વિશ્લેષણયોગ્ય	✅ → tree-shaking	❌ મુશ્કેલ
બંધનો	live (read-only)	નકલ કરેલ મૂલ્ય
`this` ટોચ પર	`undefined`	`module.exports`