0Pricing
JavaScript Academy · Lekcja

Osobliwości loadera ESM, różnice między ścieżkami i URL-ami

Bezpieczne rozwiązywanie URL-i, rozumienie specyfikatorów względnych i bare oraz różnic między URL-ami plików a URL-ami internetowymi. Małe, uruchamialne demonstracje

Osobliwości loadera ESM, różnice między ścieżkami i URL-ami to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 2 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 3 lekcji w sumie.

Obraz całości

Cel: bezpiecznie rozwiązywać ścieżki w różnych środowiskach.

  • Należy używać konstruktora URL do rozwiązywania ścieżek względnych
  • Należy rozróżniać specyfikatory względne i bare
  • Należy znać różnice między file: a https:
  • Należy unikać zawodnego łączenia ścieżek za pomocą ciągów znaków
Osobliwości loadera ESM, różnice między ścieżkami i URL-ami — ilustracja 1

Ścieżka względna względem bazy

new URL(relative, base) poprawnie obsługuje fragmenty ścieżek i ukośniki.

// 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);
Osobliwości loadera ESM, różnice między ścieżkami i URL-ami — ilustracja 2

Normalizacja za pomocą ..

Konstruktor prawidłowo usuwa ../, więc nie trzeba ręcznie manipulować ciągami znaków.

// URL resolves "../" segments
const u = new URL("../assets/a.txt", "https://x.com/app/views/page/");
console.log("normalized:", u.href);
Osobliwości loadera ESM, różnice między ścieżkami i URL-ami — ilustracja 3

Specyfika adresów file:

Adresy URL file: wskazują lokalne pliki w środowiskach podobnych do Node; przeglądarki nie mogą odczytywać ich bezpośrednio bez działania użytkownika.

// 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);
Osobliwości loadera ESM, różnice między ścieżkami i URL-ami — ilustracja 4

Rodzaje specyfikatorów

Moduły ładujące ESM traktują specyfikatory bare inaczej niż specyfikatory względne lub bezwzględne adresy URL. Znajomość ich rodzaju jest pomocna.

// 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"));
Osobliwości loadera ESM, różnice między ścieżkami i URL-ami — ilustracja 5

Nawyki przyjazne początkującym

Wskazówki:

  • Należy preferować URL(relative, base) zamiast konkatenacji ciągów znaków.
  • Należy rozumieć różnicę między specyfikatorami bare a względnymi.
  • Należy unikać zakładania, że pliki istnieją w przeglądarce.
Osobliwości loadera ESM, różnice między ścieżkami i URL-ami — ilustracja 6

Quiz z podstaw rozwiązywania adresów URL

Szybkie sprawdzenie: bezpieczne tworzenie adresu URL.

Osobliwości loadera ESM, różnice między ścieżkami i URL-ami — ilustracja 7

Podsumowanie

Podsumowanie: należy używać konstruktora URL do rozwiązywania ścieżek względnych (./, ../), rozpoznawać różnicę między specyfikatorami bare a względnymi oraz pamiętać, że adresy URL file: różnią się od adresów internetowych.

Osobliwości loadera ESM, różnice między ścieżkami i URL-ami — ilustracja 8

Często zadawane pytania

Czy lekcja „Osobliwości loadera ESM, różnice między ścieżkami i URL-ami” jest bezpłatna?

Tak — pełny tekst „Osobliwości loadera ESM, różnice między ścieżkami i URL-ami” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 3 lekcji w sumie.

Co nauczysz się w „Osobliwości loadera ESM, różnice między ścieżkami i URL-ami”?

Bezpieczne rozwiązywanie URL-i, rozumienie specyfikatorów względnych i bare oraz różnic między URL-ami plików a URL-ami internetowymi. Małe, uruchamialne demonstracje Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?

Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 3.

Ile czasu zajmuje lekcja „Osobliwości loadera ESM, różnice między ścieżkami i URL-ami”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?

Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Zmienne globalne, dostępność fetch, API plików i sieci
  2. Osobliwości loadera ESM, różnice między ścieżkami i URL-ami
  3. Zmienne środowiskowe i wzorce konfiguracji
← Powrót do JavaScript Academy