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 உங்களுக்கு ஒரு 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`