HTML Academy · Aula

Scripts de módulos ES type=module

Carregue JavaScript como módulos ES com type=module.

Scripts de módulos ES type=module é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 1 de 4. 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 HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.

O que são módulos ES?

Um módulo ES é um arquivo JavaScript que usa as declarações import e export. Os módulos têm seu próprio escopo (sem poluição global), modo estrito por padrão e dependências explícitas — resolvendo problemas de ordenação de tags de script que se acumularam durante décadas.

A tag de script de módulo

<script type="module" src="app.js"> informa ao navegador que o arquivo é um módulo. O navegador analisa as importações, busca as dependências em paralelo e só executa o ponto de entrada depois que todo o grafo de dependências é baixado e compilado.

<script type="module" src="app.js"></script>

Módulos são adiados

Os scripts de módulo se comportam como se tivessem defer: são baixados em paralelo com a análise do HTML e executados após a análise, na ordem das declarações. Você pode colocar <script type="module"> em qualquer lugar (até mesmo em <head>) sem bloquear a página.

As importações usam especificadores

Uma declaração de importação usa um especificador — uma URL relativa (./utils.js), uma URL absoluta (https://cdn.example.com/lib.js) ou um nome sem caminho (lodash). Nomes sem caminho exigem um mapa de importações (abordado a seguir), pois o navegador não sabe para qual arquivo eles apontam.

// app.js
import { sum } from "./utils.js";
import { render } from "https://esm.sh/preact";
console.log(sum(1, 2));

Extensões de arquivo são obrigatórias

Os navegadores não adicionam automaticamente .js aos especificadores de importação. import "./utils" falha; import "./utils.js" funciona. Empacotadores e Node podem ser mais permissivos; o navegador é rigoroso, portanto escreva a extensão explicitamente.

CORS é obrigatório

Os módulos sempre são buscados com CORS, mesmo quando estão na mesma origem. Os arquivos de módulo entre origens devem enviar o cabeçalho Access-Control-Allow-Origin apropriado, ou a importação falhará. A maioria das redes CDN (esm.sh, jsdelivr, unpkg) já configura isso corretamente.

Espera no nível superior

Os módulos aceitam await no nível superior — não é necessário um invólucro de função assíncrona: const data = await fetch("/api").then(r => r.json()). Os consumidores do módulo aguardam a resolução da espera no nível superior antes de serem executados.

// data.js
export const config = await fetch("/config.json").then(r => r.json());
// app.js (waits for data.js)
import { config } from "./data.js";
console.log(config);

Módulos são instâncias únicas

Um módulo é avaliado exatamente uma vez por sessão, independentemente de quantos outros módulos o importem. O objeto de exportações é compartilhado — todos os consumidores veem a mesma instância, o que torna os módulos uma forma organizada de compartilhar instâncias únicas, como um objeto de configuração ou um repositório de estado.

Módulos embutidos

Você também pode escrever módulos embutidos: <script type="module">import x from "./y.js"; ...</script>. Isso é útil para código de inicialização ou experimentos, embora os arquivos externos sejam mais fáceis de depurar e armazenar em cache.

Alternativa legada com nomodule

Associe um <script type="module"> a um <script nomodule src="legacy.js">. Os navegadores modernos executam o módulo e ignoram o script nomodule; os navegadores legados executam o script nomodule e ignoram o módulo. Isso é usado durante a migração para aplicações totalmente baseadas em ESM.

Erros e falhas de importação

Uma importação que falha (404, CORS, erro de sintaxe) gera uma exceção e impede a execução de todo o grafo de módulos. Use o painel Rede para localizar solicitações de módulos que falharam e o Console para ler a mensagem real de erro da importação.

Verificação de conhecimento

Por que os scripts de módulo se comportam como se o adiamento estivesse definido sem que você o especifique?

Resumo

Perguntas Frequentes

A aula “Scripts de módulos ES type=module” é grátis?

Sim — o texto completo de “Scripts de módulos ES type=module” é 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 HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.

O que vou aprender em “Scripts de módulos ES type=module”?

Carregue JavaScript como módulos ES com type=module. Você pratica HTML 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 HTML Academy?

Nenhuma experiência prévia é necessária. HTML 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 4.

Quanto tempo leva a aula “Scripts de módulos ES type=module”?

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 HTML Academy?

Sim. Cada aula de HTML 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

← Voltar para HTML Academy