"Antes dos módulos, JavaScript era como um galpão sem prateleiras. ES Modules trouxeram as prateleiras padronizadas."
ES Modules (ESM) são o sistema de módulos nativo desde ES2015 — import/export declarativos, suporte em browsers e Node.js, e base para tree-shaking.
export const PI = 3.14159;export function square(x) { return x * x; } import { PI, square } from './math.js';Neste guia da série 33 Conceitos JS — projeto open source criado por Leonardo Maldonado — você entende ESM vs CommonJS, live bindings, imports dinâmicos e deploy em browser/Node.
Pré-requisitos: IIFE, Modules & Namespaces (história dos módulos) e Async/Await (dynamic import e top-level await).
// metadados do artigo
{
"tag": "advanced topics",
"readTime": "23 min",
"author": "Vanderlei José Alamino",
"source": "33jsconcepts.com",
"series": "33 Conceitos JS",
"part": {
"current": 34,
"total": 38
}
}Fonte de referência
Conteúdo adaptado a partir do guia original em inglês.
seção
CommonJS (require) → runtime, dinâmico, difícil otimizarES Modules (import) → build time, estático, tree-shakeableImports ESM são declarações no top level — bundlers veem o grafo inteiro antes de executar código.
seção
| Aspecto | ES Modules | CommonJS |
|---|---|---|
| Sintaxe | import / export | require / module.exports |
| Carregamento | Assíncrono | Síncrono (Node) |
| Análise | Estática | Dinâmica |
| Exports | Live bindings | Cópias de valor |
| Strict mode | Sempre | Opcional |
| Tree-shaking | Sim | Não |
// CommonJSmodule.exports = { PI, square };const { PI } = require('./math'); // ESMexport const PI = 3.14159;import { PI, square } from './math.js';CommonJS permite require(condition ? 'a' : 'b') — flexível, mas impede otimização estática.
seção
ESM exporta referências live; CommonJS copia valores no require():
// ESM — count atualiza no importerexport let count = 0;export function increment() { count++; } import { count, increment } from './counter.js';increment();console.log(count); // 1// CommonJS — count importado fica congeladolet count = 0;module.exports = { count, increment: () => count++ }; const { count, increment } = require('./counter');increment();console.log(count); // 0 (cópia)Imports são read-only no consumer: count = 10 → TypeError.
seção
Named exports:
export const PI = 3.14159;export function add(a, b) { return a + b; } const helper = () => {};export { helper as utilHelper };Default export — um por módulo:
export default class Logger { log(msg) { console.log(msg); } }Barrel files (re-export):
export { formatDate } from './date.js';export { default as Logger } from './logger.js';// export * from './math.js' — cuidado com tree-shakingseção
import { PI, add } from './math.js';import Logger from './logger.js'; // defaultimport * as math from './math.js'; // namespaceimport React, { useState } from 'react'; // mixedimport './polyfills.js'; // side-effect onlyRegra das chaves: default → sem {}; named → com {}.
export default function Logger() {}export function format() {} import Logger from './logger.js'; // ✓ defaultimport { format } from './logger.js'; // ✓ namedimport { Logger } from './logger.js'; // ✗ ErrorBare specifiers ('react', 'lodash') — Node resolve em node_modules; browser precisa de bundler ou import map.
seção
"use strict"window/globalthis no top level = undefined