Cila është ndryshimi midis ES modules dhe CommonJS?

Question

Accepted Answer

Këto janë dy sistemet e moduleve JavaScript për ndarjen e kodit nëpër skedarë.

## Pse është e rëndësishme

```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) — sistemi i vjetër i Node

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

## Ndryshimet kryesore

| | ES Modules | CommonJS |
|---|---|---|
| Sintaksa | `import`/`export` | `require`/`module.exports` |
| Ngarkimi | statike, asinkron | dinamike, sinkron |
| Analizueshme | ✅ → tree-shaking | ❌ më i vështirë |
| Bindings | live (vetëm lexim) | vlerë e kopjuar |
| `this` në krye | `undefined` | `module.exports` |

**Statike** do të thotë që importet ESM janë të njohura në kohën e analizimit, e cila lejon bundlers të bëjnë **tree-shaking** (heqin eksportet e papërdorura). `require` CommonJS është dinamike (mund të bëni `require` në mënyrë të kushtezuar), kështu që nuk mund të analizohet lehtë.

## Aktivizimi i ESM në Node

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

## Gracka e interoperabilitetit

Nuk mund të bëni `require()` një paketi vetëm ESM nga CommonJS; përzierja e të dyve ka skaje të mprehta. Importet ESM janë gjithashtu **live bindings** — nëse eksportimi ndryshon vlerën, importuesit shikojnë vlerën e re (CJS ju jep një kopje snapshoti).

## Pse është e rëndësishme

ESM është e ardhja (vendase në shfletues, tree-shakeable, top-level `await`).

Prioritizojeni për kod të ri; kuptoni CJS sepse shumica e ekosistemit Node ende e përdor atë.

	ES Modules	CommonJS
Sintaksa	`import`/`export`	`require`/`module.exports`
Ngarkimi	statike, asinkron	dinamike, sinkron
Analizueshme	✅ → tree-shaking	❌ më i vështirë
Bindings	live (vetëm lexim)	vlerë e kopjuar
`this` në krye	`undefined`	`module.exports`