Resolução de módulos no Node e em empacotadores de navegador
Aprenda como as importações são resolvidas: especificadores relativos e simples, extensões de arquivos (.js/.mjs/.cjs), arquivos index e pontos de entrada simples de pacotes
Resolução de módulos no Node e em empacotadores de navegador é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 3 de 3. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 3 aulas no total.
Visão geral
Objetivo: entender como os caminhos de importação são resolvidos.
- Especificadores relativos e sem prefixo
- Use .js explícito (padrão seguro)
- index.js em pastas
- Pontos de entrada de pacotes (main/exports, visão geral)
Relativos e sem prefixo
As importações relativas começam com ./ ou ../. As importações sem prefixo apontam para pacotes instalados.
// Relative path imports start with ./ or ../
// Bare specifiers refer to packages installed (e.g., "lodash")
const examples = [
"import { sum } from \\"./math.js\\"; // relative, file nearby",
"import leftPad from \\"left-pad\\"; // bare, from node_modules",
"import thing from \\"../lib/thing.js\\"; // parent folder"
];
console.log("specifiers:");
for (const line of examples) console.log(line);
As extensões são importantes
Adicione a extensão .js em ESM para evitar erros de resolução. Você também pode encontrar .mjs ou .cjs.
// Include file extensions for ESM (safe beginner habit)
const extTips = [
"Good (ESM): import util from \\"./util.js\\"",
"Also seen: .mjs for ESM files, .cjs for CJS files",
"Avoid: import \\"./util\\" (may fail in Node/browsers)"
];
console.log("extensions:");
for (const t of extTips) console.log(t);
Pastas e index.js
As pastas geralmente expõem index.js. Ser explícito (.../index.js) é mais claro para iniciantes.
// If you import a folder, many setups look for index.js inside it
const folderExample = [
"my-lib/",
" index.js",
" helpers/",
" index.js"
];
for (const l of folderExample) console.log(l);
// Typical imports
const dirImports = [
"import main from \\"./my-lib/index.js\\";",
"import alsoMain from \\"./my-lib/\\"; // some setups resolve to index.js",
"import helper from \\"./my-lib/helpers/index.js\\";"
];
console.log("imports:");
for (const l of dirImports) console.log(l);
Pontos de entrada de pacotes
Os pacotes expõem pontos de entrada por meio de main/exports. As importações sem prefixo escolhem o arquivo correto para ESM ou CJS.
// Installed packages declare entry points in package.json
const pkgJson = [
"{",
" \\"name\\": \\"tiny-lib\\",",
" \\"main\\": \\"dist/cjs/index.cjs\\",",
" \\"exports\\": {",
" \\".\\": { \\"import\\": \\"./dist/esm/index.js\\", \\"require\\": \\"./dist/cjs/index.cjs\\" }",
" }",
"}"
];
console.log("package.json entry (example):");
for (const l of pkgJson) console.log(l);
// Importing a bare specifier will use these fields
console.log("import tiny-lib -> resolves to ESM or CJS entry depending on environment");
Dicas e armadilhas
Dicas:
- Prefira caminhos relativos com .js para arquivos locais.
- Use importações sem prefixo somente para pacotes instalados.
- Seja explícito com index.js para evitar ambiguidades.
- No navegador, as importações devem ser URLs válidas (geralmente com extensões).
Quiz sobre o básico da resolução
Verificação rápida: caminho seguro para uma importação local.
Recapitulação
Recapitulação: arquivos locais → ./file.js. Pacotes → nomes sem prefixo. As pastas geralmente são resolvidas para index.js. Conhecer essas regras mantém as importações simples e previsíveis.
Perguntas Frequentes
A aula “Resolução de módulos no Node e em empacotadores de navegador” é grátis?
Sim — o texto completo de “Resolução de módulos no Node e em empacotadores de navegador” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 3 aulas no total.
O que vou aprender em “Resolução de módulos no Node e em empacotadores de navegador”?
Aprenda como as importações são resolvidas: especificadores relativos e simples, extensões de arquivos (.js/.mjs/.cjs), arquivos index e pontos de entrada simples de pacotes Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar JavaScript Academy?
Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 3.
Quanto tempo leva a aula “Resolução de módulos no Node e em empacotadores de navegador”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de JavaScript Academy?
Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Fundamentos de ESM — import/export, padrão versus nomeado
- Fundamentos de CommonJS — require/module.exports e exports
- Resolução de módulos no Node e em empacotadores de navegador