Fundamentos de ESM — import/export, padrão versus nomeado
Aprenda os fundamentos de import/export em ESM: o que é um módulo, exportações nomeadas e padrão, importações de espaço de nomes e um contraste breve com CommonJS
Fundamentos de ESM — import/export, padrão versus nomeado é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 1 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.
O que é um módulo?
Objetivo: ler a sintaxe de módulos com confiança.
- O que é um módulo
- Exportações nomeadas e padrão
- import * como espaço de nomes
- Uma comparação rápida com CJS
Módulo = arquivo + escopo local
Um módulo é um arquivo. Suas variáveis são locais, a menos que você as exporte.
// A module is just a file with its own scope
// Here we simulate "module scope" by keeping variables local.
(function () {
const secret = 42; // local to this file/scope
function reveal() { return "value:" + secret; }
console.log("module-like scope:", typeof secret === "number", reveal());
})();
Exportações nomeadas — ideia
As exportações nomeadas usam chaves na importação: import { name }. Você pode exportar vários itens de um arquivo.
// Named exports: you export multiple items by name
const exampleNamedExport = [
"export const PI = 3.14;",
"export function sum(a, b) { return a + b; }",
"import { PI, sum } from \\"./math.js\\";"
];
console.log("named export example:");
for (const line of exampleNamedExport) console.log(line);
// Tiny emulation: pretend we imported two named symbols
const PI = 3.14;
function sum(a, b) { return a + b; }
console.log("emulated use:", PI, sum(2, 3));
Exportação padrão — ideia
Uma exportação padrão é importada sem chaves: import name from "path".
// Default export: each module can have at most one default
const exampleDefault = [
"export default function greet(name) { return \\"Hi \\" + name; }",
"import greet from \\"./greet.js\\"; // no braces"
];
console.log("default export example:");
for (const line of exampleDefault) console.log(line);
// Emulation of default import usage
function greet(name) { return "Hi " + name; }
console.log("emulated default:", greet("Ayla"));
Importação de espaço de nomes
import * as ns reúne as exportações nomeadas em um único objeto (por exemplo, math.sum).
// Namespace import collects all named exports under one object
const exampleNamespace = [
"import * as math from \\"./math.js\\";",
"console.log(math.PI, math.sum(1, 2));"
];
console.log("namespace import example:");
for (const line of exampleNamespace) console.log(line);
// Emulate a namespace object
const math = { PI: 3.14, sum: function (a, b) { return a + b; } };
console.log("namespace use:", math.PI, math.sum(4, 5));
Comparação entre CJS e observações sobre resolução
CJS vs ESM (visão geral):
- ESM: sintaxe de importação/exportação (estática). Exemplo: import { x } from "./m.js".
- CJS: require/module.exports (dinâmica). Exemplo: const x = require("./m.js").
- Em ESM, use extensões de arquivo explícitas no navegador e em muitas configurações do Node (por exemplo, ./file.js).
Quiz sobre importações nomeadas e padrão
Verificação rápida: sintaxe de importação nomeada.
Recapitulação
Recapitulação: um módulo é um arquivo. Use exportações nomeadas com chaves, uma exportação padrão sem chaves e import * para um espaço de nomes. CJS usa require, e ESM usa import.
Perguntas Frequentes
A aula “Fundamentos de ESM — import/export, padrão versus nomeado” é grátis?
Sim — o texto completo de “Fundamentos de ESM — import/export, padrão versus nomeado” é 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 “Fundamentos de ESM — import/export, padrão versus nomeado”?
Aprenda os fundamentos de import/export em ESM: o que é um módulo, exportações nomeadas e padrão, importações de espaço de nomes e um contraste breve com CommonJS 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 1 de 3.
Quanto tempo leva a aula “Fundamentos de ESM — import/export, padrão versus nomeado”?
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