Módulos JavaScript
Módulos dividem o código JavaScript entre arquivos. export expõe valores e import os usa. A linha visível é lida / tea / mint.
Exports nomeados
Um export nomeado mantém um nome explícito e um módulo pode fornecer vários.
export const drink = "tea";
export function label(name) {
return `${name} / ${drink} / mint`;
}
drink e label atravessam a fronteira porque foram exportados; o restante fica no arquivo.
Importar nomes
Imports nomeados usam chaves e os mesmos nomes dos exports.
import { drink, label } from "./math.js";
console.log(drink);
console.log(label("lida"));
O import liga-se aos valores exportados, sem criar outra definição. No navegador, os arquivos precisam de HTTP ou HTTPS.
Export default
O default costuma ser o valor principal. Ao importá-lo, escolha o nome local sem chaves.
export default function greet(name) {
return `Hello, ${name}!`;
}
import greet from "./greeting.js";
console.log(greet("lida"));
Imports nomeados usam { drink, label }; o default usa greet. Um arquivo pode ter apenas um export default.
Escopo e importação dinâmica
Declarações no topo não viram propriedades de window. import() carrega depois e retorna uma Promise.
const secret = "not global";
export const items = ["tea", "mint"];
import("./menu.js").then((menu) => console.log(menu.items.join(" / ")));
console.log(window.secret); // undefined
Somente items cruza a fronteira. O resultado é um objeto namespace, com exports como propriedades.
Demo independente
A página cria o código na memória, gera uma Blob URL e faz o import; não depende de arquivos do projeto.
<p id="result"></p>
<script type="module">
const source = `export const drink = "tea"; export function label(name) { return name + " / " + drink + " / mint"; }`;
const url = URL.createObjectURL(new Blob([source], { type: "text/javascript" }));
const module = await import(url);
document.querySelector("#result").textContent = module.label("lida");
URL.revokeObjectURL(url);
</script>
A página mostra exatamente lida / tea / mint. type="module" ativa a sintaxe e a Blob URL evita uma requisição de rede.
Num projeto real use math.js, app.js e <script type="module" src="./app.js"></script>. Não teste com file://; use um servidor HTTP.
📊 Escolhas de módulo
| Sintaxe | Uso | Exemplo |
|---|---|---|
| Export/import nomeado | Compartilhar nomes específicos | export const drink = "tea" / import { drink } ... |
| Export/import default | Compartilhar o valor principal | export default function greet() / import greet ... |
| Importação dinâmica | Carregar depois e receber uma Promise | import("./menu.js").then(...) |
| Escopo de módulo | Manter declarações privadas | const secret = "not global" |
Exercício prático
Crie math.js, importe drink e label em app.js, acrescente greet como default e mostre lida / tea / mint.
Erros comuns
Não remova as chaves de imports nomeados, não crie dois defaults e não espere que um valor não exportado seja global.
Ponto principal
export seleciona o que sai, import usa os valores, o default escolhe seu nome e o escopo protege declarações privadas.
Mantenha os módulos focados e libere Blob URLs temporárias ao terminar a demo.
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo