Apa perbedaan antara ES modules dan CommonJS?

Question

Accepted Answer

Ini adalah dua sistem modul JavaScript untuk membagi kode di seluruh file.

## ES Modules (ESM) — standar modern

```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 };
```

## Perbedaan utama

| | ES Modules | CommonJS |
|---|---|---|
| Sintaks | `import`/`export` | `require`/`module.exports` |
| Pemuatan | static, async | dynamic, synchronous |
| Dapat dianalisis | ✅ → tree-shaking | ❌ lebih sulit |
| Binding | live (read-only) | nilai yang disalin |
| `this` di atas | `undefined` | `module.exports` |

**Statis** berarti impor ESM diketahui pada waktu parse, yang memungkinkan bundler melakukan **tree-shaking** (menghilangkan export yang tidak digunakan). CommonJS `require` bersifat dinamis (Anda dapat `require` secara kondisional), jadi tidak mudah dianalisis.

## Mengapa ini penting

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

## Gotcha interop

Anda tidak dapat `require()` paket ESM-only dari CommonJS; mencampur keduanya memiliki tepi kasar. Impor ESM juga **binding langsung** — jika pengekspor mengubah nilai, pengimpor melihat nilai baru (CJS memberi Anda salinan snapshot).

## Mengapa ini penting

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

Pilih untuk kode baru; pahami CJS karena sebagian besar ekosistem Node masih menggunakannya.

	ES Modules	CommonJS
Sintaks	`import`/`export`	`require`/`module.exports`
Pemuatan	static, async	dynamic, synchronous
Dapat dianalisis	✅ → tree-shaking	❌ lebih sulit
Binding	live (read-only)	nilai yang disalin
`this` di atas	`undefined`	`module.exports`