0Pricing
JavaScript Academy · Урок

Особенности загрузчика ESM, различия путей и URL

Безопасно разрешайте URL, разберитесь в относительных и кратких спецификаторах и посмотрите, чем URL файлов отличаются от веб-URL. Небольшие запускаемые примеры

«Особенности загрузчика ESM, различия путей и URL» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 2 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 3 уроков всего.

Общая картина

Цель: безопасно разрешать пути в разных средах.

  • Используйте конструктор URL для разрешения относительных путей
  • Различайте относительные и неотносительные спецификаторы
  • Понимайте различия между file: и https:
  • Не используйте хрупкое объединение строк для построения путей
Особенности загрузчика ESM, различия путей и URL — иллюстрация 1

Относительный путь относительно основы

new URL(relative, base) правильно обрабатывает части пути и косые черты.

// 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);
Особенности загрузчика ESM, различия путей и URL — иллюстрация 2

Нормализация с помощью ..

Конструктор правильно удаляет ../, поэтому не нужны ручные операции со строками.

// URL resolves "../" segments
const u = new URL("../assets/a.txt", "https://x.com/app/views/page/");
console.log("normalized:", u.href);
Особенности загрузчика ESM, различия путей и URL — иллюстрация 3

Особенности URL file:

URL file: указывают на локальные файлы в средах, подобных Node; браузеры не могут читать их напрямую без действия пользователя.

// 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);
Особенности загрузчика ESM, различия путей и URL — иллюстрация 4

Виды спецификаторов

Загрузчики ESM обрабатывают неотносительные спецификаторы иначе, чем относительные или абсолютные URL. Важно понимать, к какому виду относится спецификатор.

// 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"));
Особенности загрузчика ESM, различия путей и URL — иллюстрация 5

Привычки для начинающих

Советы:

  • Предпочитайте URL(relative, base) конкатенации строк.
  • Понимайте различия между неотносительными и относительными спецификаторами.
  • Не предполагайте, что файлы существуют в браузере.
  • Делайте пути короткими и понятными для начинающих.
Особенности загрузчика ESM, различия путей и URL — иллюстрация 6

Тест по основам разрешения URL

Быстрая проверка: безопасное построение URL.

Особенности загрузчика ESM, различия путей и URL — иллюстрация 7

Повторение

Повторение: используйте конструктор URL для разрешения относительных путей (./, ../), различайте неотносительные и относительные спецификаторы и помните, что URL file: отличаются от веб-адресов.

Особенности загрузчика ESM, различия путей и URL — иллюстрация 8

Часто задаваемые вопросы

Урок «Особенности загрузчика ESM, различия путей и URL» бесплатный?

Да — полный текст урока «Особенности загрузчика ESM, различия путей и URL» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 3 уроков всего.

Чему я научусь в уроке «Особенности загрузчика ESM, различия путей и URL»?

Безопасно разрешайте URL, разберитесь в относительных и кратких спецификаторах и посмотрите, чем URL файлов отличаются от веб-URL. Небольшие запускаемые примеры Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 3.

Сколько времени занимает урок «Особенности загрузчика ESM, различия путей и URL»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Глобальные объекты, доступность fetch, файловые и сетевые API
  2. Особенности загрузчика ESM, различия путей и URL
  3. Переменные среды и схемы конфигурации
← Назад к JavaScript Academy