HTML Academy · Урок

Карты импорта: importmap

Сопоставляйте сокращённые спецификаторы модулей с URL с помощью importmap

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

Проблема короткого спецификатора

В Node выражение import "lodash" работает, потому что механизм разрешения находит node_modules/lodash. В браузерах нет node_modules — им нужен настоящий URL. Без дополнительной настройки выражение import "lodash" вызывает ошибку «Не удалось разрешить спецификатор модуля».

Назначение карт импорта

Карта импорта объявляет словарь JSON, сопоставляющий короткие спецификаторы (и префиксы URL) с настоящими URL. В момент разрешения модуля браузер обращается к карте и преобразует import "lodash" в запрос по настроенному Вами URL.

<script type="importmap">
{
  "imports": {
    "lodash": "https://esm.sh/lodash@4.17.21",
    "preact": "https://esm.sh/preact"
  }
}
</script>

Важен порядок объявления

Карта импорта должна находиться перед любым <script type="module">, использующим короткие спецификаторы: после начала разрешения импортов модуля карта фиксируется. Разместите <script type="importmap"> ближе к началу <head>.

Сопоставления по префиксу

Записи с завершающей косой чертой сопоставляют префиксы URL: "@/": "/src/" преобразует любой import "@/utils/sum.js" в /src/utils/sum.js. Так можно имитировать синтаксис «псевдонимов», который обычно поддерживают сборщики.

Управление версиями с помощью карты

Карта импорта централизует выбор версий: измените "react" с esm.sh/react@18 на esm.sh/react@19 в одном месте, и каждый импортирующий модуль получит новый URL. Без карты импорта в каждом месте импорта версия зашита отдельно.

Области

Ключ scopes позволяет задавать разные сопоставления для разных частей сайта. Внутри /admin/ Вам может понадобиться более новая версия зависимости, чем внутри /public/; области позволяют выбирать сопоставление по пути.

{
  "imports": { "lodash": "https://esm.sh/lodash@4" },
  "scopes": {
    "/admin/": { "lodash": "https://esm.sh/lodash@5" }
  }
}

Одна карта на документ

В каждом документе может быть не более одного <script type="importmap">. Размещение двух карт на одной странице недопустимо; объедините их содержимое в один блок.

Внешние карты импорта

Карту можно разместить по внешнему URL с помощью <script type="importmap" src="map.json">. Поддержка этого варианта появилась позже, чем поддержка встроенных карт, но теперь широко распространена; это удобно, если Вы хотите кэшировать большую карту отдельно от документа.

Создание карт импорта

Такие инструменты, как JSPM Generator и режим --servedir сборщика esbuild, автоматически создают карты импорта из package.json. Созданные карты включают все транзитивные зависимости и сопоставляют каждую с URL CDN, обеспечивая рабочий процесс без каталога node_modules.

Поддержка браузерами

Карты импорта поддерживаются в Chrome, Edge, Safari и Firefox. Старые браузеры игнорируют тег <script type="importmap">, поэтому короткие спецификаторы не работают. Для широкой поддержки устаревших браузеров используйте сборщик, который разрешает спецификаторы во время сборки, и отдавайте обычные URL.

Вариант с полифилом

Полифил ES Module Shims (es-module-shims.js) добавляет поддержку карт импорта и нескольких более новых возможностей в старых браузерах. Подключите его перед скриптом карты импорта. Большинство современных проектов пропускает полифил и полагается на встроенную поддержку.

Проверка знаний

Почему <script type="importmap"> должен находиться перед любым скриптом модуля, использующим короткие спецификаторы?

Итоги

Карты импорта сопоставляют короткие спецификаторы и префиксы URL с настоящими URL, возвращая в браузер возможность использовать импорт «import lodash» в стиле Node. Объявляйте карту один раз на документ перед любым скриптом модуля или подключайте её отдельно через src; области позволяют переопределять сопоставления для отдельных путей. Для рабочего процесса без каталога node_modules сочетайте карты с CDN (esm.sh, jsdelivr).

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

Урок «Карты импорта: importmap» бесплатный?

Да — полный текст урока «Карты импорта: importmap» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «Карты импорта: importmap»?

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

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

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

Сколько времени занимает урок «Карты импорта: importmap»?

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

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

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

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

← Назад к HTML Academy