Qual é a diferença entre ES modules e CommonJS?

Question

Accepted Answer

Estes são os dois sistemas de módulos do JavaScript para dividir código entre arquivos.

## Por que isso importa

```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) — sistema legado do Node

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

## Diferenças principais

| | ES Modules | CommonJS |
|---|---|---|
| Sintaxe | `import`/`export` | `require`/`module.exports` |
| Carregamento | estático, assíncrono | dinâmico, síncrono |
| Analisável | ✅ → tree-shaking | ❌ mais difícil |
| Bindings | live (somente leitura) | um valor copiado |
| `this` no topo | `undefined` | `module.exports` |

**Estático** significa que os imports ESM são conhecidos no tempo de análise, o que permite aos bundlers fazer **tree-shaking** (descartar exportações não utilizadas). O `require` CommonJS é dinâmico (você pode `require` condicionalmente), portanto não pode ser analisado tão facilmente.

## Habilitando ESM no Node

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

## Armadilha de interoperabilidade

Você não pode fazer `require()` de um pacote apenas ESM do CommonJS; misturar os dois tem desvantagens. Os imports ESM também são **live bindings** — se o exportador muda o valor, os importadores veem o novo valor (CJS lhe dá uma cópia de snapshot).

## Por que isso importa

ESM é o futuro (nativo do navegador, tree-shakeable, `await` de nível superior).

Prefira para código novo; entenda CJS porque grande parte do ecossistema Node ainda o utiliza.

	ES Modules	CommonJS
Sintaxe	`import`/`export`	`require`/`module.exports`
Carregamento	estático, assíncrono	dinâmico, síncrono
Analisável	✅ → tree-shaking	❌ mais difícil
Bindings	live (somente leitura)	um valor copiado
`this` no topo	`undefined`	`module.exports`