Откройте для себя возможности карт импорта для легкого управления зависимостями и улучшенной организации кода
Safari недавно поддержал импорт карт, а это означает, что его поддерживают почти все основные браузерные платформы. Вы можете начать использовать его в нескольких ситуациях. В этой статье объясняется, что это такое, для чего оно нужно, а также некоторые советы по его использованию.
Нежное введение
Модули ES впервые были поддержаны в ES6, но в HTML можно использовать только относительные или абсолютные пути, например:
import React from "https://esm.sh/[email protected]"
Но обычно вы работаете с Node.js или интерфейсной упаковкой (Webpack, Vite) и другими инструментами, мы можем использовать пустой спецификатор модуля:
const express = require('express') // CommonJS
import React from 'react'; // webpack
А карты импорта позволяют использовать голые спецификаторы модулей в необработанных HTML-файлах.
Примеры
Простой пример
Чтобы создать карту импорта, вам нужно добавить тег <script type="importmap"> в ваш HTML-документ. Обязательно поместите его перед первым тегом <script type="module">, чтобы браузер мог проанализировать его перед разрешением модулей.
Вот простой пример, чтобы показать вам, как это делается:
<script type="importmap">
{
"imports": {
"moment": "https://cdn.skypack.dev/moment"
"react": "https://esm.sh/[email protected]"
}
}
</script>
<script type="module">
import moment from 'moment';
console.log(moment().format('MMMM Do YYYY, h:mm:ss a'));
</script>
В этом примере мы сопоставляем спецификатор moment с URL-адресом из CDN Skypack. Теперь, когда мы импортируем moment в наш скрипт, браузер знает, где его найти. Таким образом, нам не нужно беспокоиться о предоставлении полного URL-адреса в нашем операторе импорта.
Импорт определенных модулей
Иногда вам нужно импортировать не всю библиотеку, а только несколько определенных модулей. Импорт карт упрощает эту задачу! Просто используйте ключи спецификаторов и пути, заканчивающиеся косой чертой. Вот пример:
<script type="importmap">
{
"imports": {
"lodash/": "https://cdn.skypack.dev/lodash-es/"
}
}
</script>
<script type="module">
import debounce from 'lodash/debounce';
import throttle from 'lodash/throttle';
// Use debounce and throttle functions in your code
</script>
В этом случае мы сопоставляем спецификатор lodash/ с путем к пакету lodash-es в CDN Skypack. Теперь мы можем импортировать определенные функции lodash, такие как debounce и throttle, без импорта всей библиотеки.
Динамический импорт карт
Знаете ли вы, что вы можете динамически создавать карты импорта? Это может быть полезно для условного импорта модулей на основе обнаружения функций. Вот пример, который импортирует другой модуль в зависимости от того, поддерживает ли браузер IntersectionObserver API:
<script>
const importMap = {
imports: {
"lazyload": 'IntersectionObserver' in window
? './lazyload.js'
: './lazyload-fallback.js',
},
};
const im = document.createElement('script');
im.type = 'importmap';
im.textContent = JSON.stringify(importMap);
document.currentScript.after(im);
</script>
Использование нескольких версий одного и того же модуля
Иногда вам нужно использовать разные версии одного и того же модуля в вашем проекте. Импорт карт упрощает эту задачу. Просто используйте разные спецификаторы импорта в сопоставлении:
<script type="importmap">
{
"imports": {
"lodash@3/": "https://unpkg.com/[email protected]/",
"lodash@4/": "https://unpkg.com/[email protected]/"
}
}
</script>
<script type="module">
import debounce from 'lodash@3/debounce';
import throttle from 'lodash@4/throttle';
// Use debounce and throttle functions from different versions of lodash
</script>
В этом примере мы сопоставляем два разных спецификатора для lodash (lodash@3/ и lodash@4/) с разными версиями библиотеки. Теперь мы можем импортировать и использовать в нашем коде функции из обеих версий.
Области импорта карт
Карты импорта также позволяют изменять значение спецификатора импорта в заданной области. Это может быть полезно, если вы хотите использовать разные версии библиотеки для разных частей вашего проекта:
<script type="importmap">
{
"imports": {
"lodash/": "https://unpkg.com/[email protected]/"
},
"scopes": {
"/legacy/js": {
"lodash/": "https://unpkg.com/[email protected]/"
}
}
}
</script>
С этой картой импорта любые модули в пути /legacy/js будут использовать URL-адрес https://unpkg.com/[email protected]/ при импорте lodash/, а другие модули будут использовать https://unpkg.com/[email protected]/.
Быстро интегрируйте пакеты NPM
Как показано выше, вы можете использовать ESM, Unpkg и Skypack, а также другие сервисы CDN и создавать хэш-кэш. Эти пакеты можно использовать из коробки, не создавая их самостоятельно.
Поддержка браузера и полифиллы
Как упоминалось в начале, на сегодняшний день большинство основных браузеров поддерживают это:
Если вы хотите обнаружить эту функцию в браузере, вы можете использовать следующий код:
const isSupportImportMap = HTMLScriptElement.supports?.('importmap');
console.log('isSupportImportMap: ', isSupportImportMap);
Если вам нужны полифиллы, можно использовать ES Module Shims.
Заключение
Карты импорта — это фантастический способ упростить работу с модулями JavaScript в браузере. Они упрощают управление зависимостями, обновление отдельных модулей и использование нескольких версий одного и того же пакета. Но и у него есть свое применение. Его инженерная поддержка не очень хороша в крупных фронтенд-проектах. Я думаю, что у него может быть рынок только простых веб-приложений. Так вы бы начали использовать его? Добро пожаловать, чтобы обсудить со мной.
Спасибо, что прочитали. Если вам нравятся такие истории и вы хотите поддержать меня, пожалуйста, подумайте о том, чтобы стать участником Medium. Это стоит 5 долларов в месяц и дает неограниченный доступ к контенту Medium. Я получу небольшую комиссию, если вы зарегистрируетесь по моей ссылке.
Дополнительные материалы на PlainEnglish.io.
Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .
Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.
