Particularidades del cargador ESM y diferencias entre rutas y URL
Resuelva URL de forma segura, comprenda los specifiers relativos frente a bare y observe cómo difieren las URL de archivo de las URL web. Incluye demostraciones pequeñas y ejecutables.
Particularidades del cargador ESM y diferencias entre rutas y URL es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 2 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 3 lecciones en total.
Visión general
Objetivo: resolver rutas de forma segura en distintos entornos.
- Use el constructor URL para resolver rutas relativas
- Distinga entre especificadores relativos y bare
- Comprenda las diferencias entre file: y https:
- Evite concatenar cadenas de forma frágil para crear rutas
Relativa respecto a una base
new URL(relative, base) gestiona correctamente las partes de las rutas y las 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);
Normalizar con ..
El constructor elimina correctamente ../, por lo que no necesita trucos manuales con cadenas.
// URL resolves "../" segments
const u = new URL("../assets/a.txt", "https://x.com/app/views/page/");
console.log("normalized:", u.href);
Particularidades de las URL file:
Las URL file: apuntan a archivos locales en entornos similares a Node; los navegadores no pueden leerlas directamente sin la intervención del usuario.
// 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);
Tipos de especificadores
Los cargadores ESM tratan los especificadores bare de forma distinta a las URL relative o absolutas. Es útil saber de qué tipo es cada uno.
// 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"));
Hábitos adecuados para principiantes
Consejos:
- Prefiera URL(relative, base) a la concatenación de cadenas.
- Comprenda la diferencia entre los especificadores bare y relative.
- Evite suponer que existen archivos en el navegador.
- Mantenga las rutas breves y legibles para principiantes.
Cuestionario sobre fundamentos de la resolución de URL
Comprobación rápida: crear una URL de forma segura.
Resumen
Resumen: use el constructor URL para resolver rutas relativas (./, ../), distinga entre especificadores bare y relative y recuerde que las URL file: son diferentes de las URL web.
Preguntas frecuentes
¿La lección «Particularidades del cargador ESM y diferencias entre rutas y URL» es gratis?
Sí — el texto completo de «Particularidades del cargador ESM y diferencias entre rutas y URL» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 3 lecciones en total.
¿Qué aprenderé en «Particularidades del cargador ESM y diferencias entre rutas y URL»?
Resuelva URL de forma segura, comprenda los specifiers relativos frente a bare y observe cómo difieren las URL de archivo de las URL web. Incluye demostraciones pequeñas y ejecutables. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar JavaScript Academy?
No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 3.
¿Cuánto tiempo toma la lección «Particularidades del cargador ESM y diferencias entre rutas y URL»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?
Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Globales, disponibilidad de fetch y APIs de archivos/red
- Particularidades del cargador ESM y diferencias entre rutas y URL
- Variables de entorno y patrones de configuración