0Pricing
JavaScript Academy · Aula

Particularidades do carregador ESM e diferenças entre caminho e URL

Resolva URLs com segurança, entenda especificadores relativos e simples e veja como URLs de arquivos diferem de URLs da web. Pequenas demonstrações executáveis

Particularidades do carregador ESM e diferenças entre caminho e URL é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 2 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: Resolver caminhos com segurança em diferentes ambientes.

  • Use o construtor URL para resolver caminhos relativos
  • Conheça os especificadores relativos e simples
  • Entenda as diferenças entre file: e https:
  • Evite unir caminhos com concatenações frágeis de cadeias de caracteres
Particularidades do carregador ESM e diferenças entre caminho e URL — ilustração 1

Relativo à base

new URL(relative, base) trata corretamente partes de caminhos e barras.

// Use URL to resolve "./" against a base
const base = "https://site.com/app/screens/";
const img = new URL("./images/icon.png", base);
console.log("resolved:", img.href);
Particularidades do carregador ESM e diferenças entre caminho e URL — ilustração 2

Normalize com ..

O construtor remove ../ corretamente, portanto não é necessário usar soluções manuais frágeis com cadeias de caracteres.

// URL resolves "../" segments
const u = new URL("../assets/a.txt", "https://x.com/app/views/page/");
console.log("normalized:", u.href);
Particularidades do carregador ESM e diferenças entre caminho e URL — ilustração 3

Visão geral de URLs file:

URLs file: apontam para arquivos locais em ambientes semelhantes ao Node; os navegadores não podem lê-las diretamente sem uma ação do usuário.

// You can also work with file: URLs (no actual file I/O here)
const baseFile = "file:///home/user/project/src/";
const file = new URL("./data/sample.txt", baseFile);
console.log("file url:", file.href);
Particularidades do carregador ESM e diferenças entre caminho e URL — ilustração 4

Tipos de especificadores

Os carregadores ESM tratam especificadores simples de forma diferente das URLs relativas ou absolutas. Saber o tipo ajuda.

// Tiny helper: categorize a module specifier
function specKind(s) {
  if (typeof s !== "string") return "unknown";
  if (s.startsWith("./") || s.startsWith("../") || s.startsWith("/")) return "relative-or-absolute";
  if (s.startsWith("http://") || s.startsWith("https://") || s.startsWith("file://")) return "url";
  return "bare"; // like "lodash" or "fs"
}

console.log("kind ./util.js:", specKind("./util.js"));
console.log("kind lodash   :", specKind("lodash"));
console.log("kind https:// :", specKind("https://cdn.site/x.js"));
Particularidades do carregador ESM e diferenças entre caminho e URL — ilustração 5

Bons hábitos para iniciantes

Dicas:

  • Prefira URL(relative, base) à concatenação de cadeias de caracteres.
  • Entenda os especificadores simples e relativos.
  • Evite presumir que os arquivos existem no navegador.
  • Mantenha os caminhos curtos e legíveis para iniciantes.
Particularidades do carregador ESM e diferenças entre caminho e URL — ilustração 6

Questionário sobre fundamentos da resolução de URLs

Verificação rápida: Crie uma URL com segurança.

Particularidades do carregador ESM e diferenças entre caminho e URL — ilustração 7

Recapitulação

Recapitulação: Use o construtor URL para resolver caminhos relativos (./, ../), reconheça os especificadores simples e relativos e lembre-se de que URLs file: são diferentes das URLs da web.

Particularidades do carregador ESM e diferenças entre caminho e URL — ilustração 8

Perguntas Frequentes

A aula “Particularidades do carregador ESM e diferenças entre caminho e URL” é grátis?

Sim — o texto completo de “Particularidades do carregador ESM e diferenças entre caminho e URL” é 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 “Particularidades do carregador ESM e diferenças entre caminho e URL”?

Resolva URLs com segurança, entenda especificadores relativos e simples e veja como URLs de arquivos diferem de URLs da web. Pequenas demonstrações executáveis 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 2 de 3.

Quanto tempo leva a aula “Particularidades do carregador ESM e diferenças entre caminho e URL”?

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

  1. Globais, disponibilidade de fetch e APIs de arquivos e rede
  2. Particularidades do carregador ESM e diferenças entre caminho e URL
  3. Variáveis de ambiente e padrões de configuração
← Voltar para JavaScript Academy