Import Maps — JSON конфиг внутри HTML, который маппит bare import specifiers ("react", "lodash") в real URLs. Позволяет использовать ES modules в браузере БЕЗ bundler. Все modern browsers support (Chrome 89+, Firefox 108+, Safari 16.4+). Use cases: no-build frontend, HTMX apps, WordPress, dev-only imports.
Ниже: подробности, пример, смежные термины, FAQ.
Бесплатный онлайн-инструмент — проверка HTTP-заголовков: результат мгновенно, без регистрации.
<!-- HTML -->
<script type="importmap">
{
"imports": {
"react": "https://esm.sh/react@18",
"react-dom": "https://esm.sh/react-dom@18",
"lodash/": "https://esm.sh/lodash/"
}
}
</script>
<script type="module">
import React from 'react'; // resolves к esm.sh
import debounce from 'lodash/debounce';
</script>Import Maps позволяют управлять зависимостями JavaScript приложений без использования сборщиков, таких как Webpack или Rollup. Это достигается за счет определения маппинга модулей в формате JSON, что упрощает процесс импорта и уменьшает количество кода, необходимого для настройки окружения. Важно отметить, что Import Maps являются экспериментальной функцией и поддерживаются в современных браузерах, таких как Chrome и Firefox.
Для начала работы с Import Maps, вам нужно создать HTML-файл и добавить в него элемент <script type="importmap">. Внутри этого элемента вы можете определить маппинг для ваших модулей. Например:
{
"imports": {
"lodash": "https://cdn.jsdelivr.net/npm/lodash-es@4.17.21/lodash.js",
"axios": "https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"
}
}После того как вы определили маппинг, вы можете использовать модули в вашем JavaScript коде:
import _ from 'lodash';
import axios from 'axios';
console.log(_.VERSION);
axios.get('https://api.example.com').then(response => console.log(response.data));Обратите внимание, что модули будут загружены непосредственно из указанных URL, что позволяет избежать дополнительных настроек сборщиков.
Использование Import Maps имеет свои плюсы и минусы. К основным преимуществам можно отнести:
Однако существуют и недостатки:
Таким образом, использование Import Maps может быть отличным выбором для небольших проектов или прототипов, но для крупных приложений с множеством зависимостей возможно лучше использовать традиционные сборщики.
Import Maps позволяют разработчикам JavaScript подключать модули без использования сборщиков (bundlers), таких как Webpack или Rollup. Это достигается за счет определения маппинга модулей в формате JSON, который интерпретируется браузером. Для использования Import Maps нужно добавить тег <script type="importmap"></script> в HTML и указать пути к модулям.
Настройка Import Maps в вашем проекте — это простой процесс, который не требует сложных конфигураций. Вам нужно всего лишь определить маппинг ваших модулей в JSON-формате и вставить его в HTML-документ. Рассмотрим шаги настройки более подробно.
Создайте JSON-объект, который будет содержать маппинг ваших модулей. Например:
{ "imports": { "lodash": "https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js", "axios": "https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js" }}В этом примере мы определили два модуля: lodash и axios, указывая их URL-адреса для загрузки.
Теперь вставьте этот JSON-объект в ваш HTML-документ с помощью тега <script type="importmap"></script>:
<script type="importmap"> { "imports": { "lodash": "https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js", "axios": "https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js" } } </script>Это позволит браузеру знать, где искать указанные модули.
После определения Import Map вы можете использовать модули в вашем JavaScript-коде. Например:
import _ from 'lodash'; import axios from 'axios';Теперь вы можете использовать функции из lodash и axios в вашем коде без необходимости в сборщиках.
Перед использованием Import Maps в производственных проектах, убедитесь, что браузеры ваших пользователей поддерживают эту функцию. На момент написания, Import Maps поддерживаются в последних версиях Chrome, Edge и Safari. Проверьте Caniuse для получения актуальной информации о поддержке.
Рассмотрим простой пример использования Import Maps в проекте:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Пример Import Maps</title> <script type="importmap"> { "imports": { "lodash": "https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js", "axios": "https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js" } } </script> </head> <body> <script type="module"> import _ from 'lodash'; import axios from 'axios'; console.log(_.VERSION); axios.get('https://api.example.com/data').then(response => console.log(response.data)); </script> </body> </html>Этот HTML-документ загружает lodash и axios через Import Maps, и выводит версию lodash в консоль, а также делает запрос к API с помощью axios.
Для simple projects — да. Для complex apps (tree-shaking, minification, TypeScript) — всё ещё нужен. Dev-only без bundler — рабочий tradeoff.
esm.sh: active, быстрый, aggressive caching. skypack.dev: deprecated (2024). Используйте esm.sh или unpkg.com для 2026.
Modules нуждаются в CORS headers. esm.sh, unpkg, jsdelivr — все OK. Self-host ES modules на CDN с правильными headers.
Бесплатный тариф — 10 мониторов, проверки каждые 5 мин, без карты. Платные тарифы — интервал от 1 минуты и проверки из нескольких регионов.