Sự khác biệt giữa ES modules và CommonJS là gì?

Question

Accepted Answer

Đây là hai hệ thống module của JavaScript để chia tách code qua các file.

## ES Modules (ESM) — chuẩn hiện đại

```js
// import / export, dùng trong trình duyệt và Node hiện đại
import { sum } from "./math.js";
import defaultThing from "./thing.js";
export const x = 1;
export default function () {};
```

## CommonJS (CJS) — hệ thống cũ của Node

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

## Những khác biệt chính

| | ES Modules | CommonJS |
|---|---|---|
| Cú pháp | `import`/`export` | `require`/`module.exports` |
| Tải | tĩnh, async | động, đồng bộ |
| Phân tích được | ✅ → tree-shaking | ❌ khó hơn |
| Binding | live (chỉ đọc) | một giá trị được sao chép |
| `this` ở cấp trên | `undefined` | `module.exports` |

**Tĩnh** nghĩa là các import của ESM được biết tại thời điểm parse, điều này cho phép các bundler thực hiện **tree-shaking** (loại bỏ các export không dùng). `require` của CommonJS là động (bạn có thể `require` có điều kiện), nên không thể phân tích dễ dàng.

## Bật ESM trong Node

```json
{ "type": "module" } // trong package.json, hoặc dùng đuôi .mjs
```

## Lưu ý về interop

Bạn không thể `require()` một package chỉ-ESM từ CommonJS; trộn hai cái này có những góc cạnh thô ráp. Các import của ESM cũng là **live binding** — nếu bên export thay đổi giá trị, bên import sẽ thấy giá trị mới (CJS cho bạn một bản sao snapshot).

## Tại sao điều này quan trọng

ESM là tương lai (native trên trình duyệt, tree-shakeable, top-level `await`).

Hãy ưu tiên nó cho code mới; hiểu CJS vì phần lớn hệ sinh thái Node vẫn dùng nó.

	ES Modules	CommonJS
Cú pháp	`import`/`export`	`require`/`module.exports`
Tải	tĩnh, async	động, đồng bộ
Phân tích được	✅ → tree-shaking	❌ khó hơn
Binding	live (chỉ đọc)	một giá trị được sao chép
`this` ở cấp trên	`undefined`	`module.exports`