Apakah perbezaan antara ES modules dan CommonJS?

Question

Accepted Answer

Ini adalah dua sistem modul JavaScript untuk memisahkan kod merentas fail.

## ES Modules (ESM) — standard moden

```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) — sistem warisan Node

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

## Perbezaan utama

| | ES Modules | CommonJS |
|---|---|---|
| Sintaks | `import`/`export` | `require`/`module.exports` |
| Pemuatan | static, async | dinamis, synchronous |
| Boleh dianalisis | ✅ → tree-shaking | ❌ lebih sukar |
| Ikatan | live (baca sahaja) | nilai yang disalin |
| `this` di atas | `undefined` | `module.exports` |

**Static** bermakna import ESM diketahui pada masa parse, yang membenarkan bundler melakukan **tree-shaking** (buang export yang tidak digunakan). CommonJS `require` adalah dinamis (anda boleh `require` secara bersyarat), jadi lebih sukar dianalisis.

## Mengaktifkan ESM dalam Node

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

## Gotcha Interop

Anda tidak boleh `require()` pakej ESM-only dari CommonJS; mencampur kedua-duanya mempunyai tepi yang kasar. Import ESM juga **live bindings** — jika pengeksport mengubah nilai, pengimport melihat nilai baharu (CJS memberi anda salinan snapshot).

## Mengapa ia penting

ESM adalah masa depan (asli browser, tree-shakeable, top-level `await`).

Letak pilihan untuknya untuk kod baru; fahami CJS kerana banyak ekosistem Node masih menggunakannya.

	ES Modules	CommonJS
Sintaks	`import`/`export`	`require`/`module.exports`
Pemuatan	static, async	dinamis, synchronous
Boleh dianalisis	✅ → tree-shaking	❌ lebih sukar
Ikatan	live (baca sahaja)	nilai yang disalin
`this` di atas	`undefined`	`module.exports`