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 |
|---|---|---|
| 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 దిగుమతులు పార్స్ సమయానికి తెలిసినవని అర్థం, ఇది 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 మీకు స్నాప్‌షాట్ కాపీ ఇస్తుంది).

## ఇది ఎందుకు ముఖ్యమైనది

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`