0Pricing
JavaScript Academy · Lezione

Particolarità del loader ESM, differenze tra path e URL

Risolvi gli URL in sicurezza, comprendi la differenza tra specifier relativi e bare e vedi come gli URL file differiscano dagli URL web. Piccole demo eseguibili.

Particolarità del loader ESM, differenze tra path e URL è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 2 di 3. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 3 lezioni in totale.

Panoramica

Obiettivo: risolvere i percorsi in sicurezza tra gli ambienti.

  • Utilizzi il costruttore URL per risolvere i percorsi relativi
  • Conosca gli specifier relativi e bare
  • Comprenda le differenze tra file: e https:
  • Eviti concatenazioni di stringhe fragili per i percorsi
Particolarità del loader ESM, differenze tra path e URL — illustrazione 1

Relativo rispetto alla base

new URL(relative, base) gestisce correttamente parti del percorso e slash.

// 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);
Particolarità del loader ESM, differenze tra path e URL — illustrazione 2

Normalizzare con ..

Il costruttore rimuove correttamente ../, quindi non servono manipolazioni manuali delle stringhe.

// URL resolves "../" segments
const u = new URL("../assets/a.txt", "https://x.com/app/views/page/");
console.log("normalized:", u.href);
Particolarità del loader ESM, differenze tra path e URL — illustrazione 3

Gli URL file:

Gli URL file: puntano a file locali nei contesti simili a Node; i browser non possono leggerli direttamente senza un'azione dell'utente.

// 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);
Particolarità del loader ESM, differenze tra path e URL — illustrazione 4

Tipi di specifier

I loader ESM trattano gli specifier bare in modo diverso dagli URL relativi o assoluti. Conoscerne il tipo è utile.

// 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"));
Particolarità del loader ESM, differenze tra path e URL — illustrazione 5

Buone pratiche per principianti

Suggerimenti:

  • Preferisca URL(relative, base) alla concatenazione di stringhe.
  • Comprenda la differenza tra specifier bare e relativi.
  • Eviti di presumere che i file esistano nel browser.
  • Mantenga i percorsi brevi e leggibili per i principianti.
Particolarità del loader ESM, differenze tra path e URL — illustrazione 6

Quiz sulle basi della risoluzione degli URL

Verifica rapida: creare un URL in sicurezza.

Particolarità del loader ESM, differenze tra path e URL — illustrazione 7

Riepilogo

Riepilogo: utilizzi il costruttore URL per risolvere i percorsi relativi (./, ../), riconosca la differenza tra specifier bare e relativi e ricordi che gli URL file: sono diversi dagli URL web.

Particolarità del loader ESM, differenze tra path e URL — illustrazione 8

Domande Frequenti

La lezione «Particolarità del loader ESM, differenze tra path e URL» è gratuita?

Sì — il testo completo di «Particolarità del loader ESM, differenze tra path e URL» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 3 lezioni in totale.

Cosa imparerò in «Particolarità del loader ESM, differenze tra path e URL»?

Risolvi gli URL in sicurezza, comprendi la differenza tra specifier relativi e bare e vedi come gli URL file differiscano dagli URL web. Piccole demo eseguibili. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 3.

Quanto tempo richiede la lezione «Particolarità del loader ESM, differenze tra path e URL»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?

Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Globali, disponibilità di fetch, API per file e rete
  2. Particolarità del loader ESM, differenze tra path e URL
  3. Variabili d’ambiente e schemi di configurazione
← Torna a JavaScript Academy