Карты импорта JavaScript теперь поддерживаются в разных браузерах.

Благодаря картам импорта импорт модулей ES теперь становится намного проще.

Модули ES — это современный способ включения и повторного использования кода JavaScript в веб-приложениях. Они поддерживаются современными браузерами и предоставляют ряд преимуществ по сравнению со старыми немодульными подходами к разработке JavaScript.

Современный способ использования модулей ES — использование тега <script type="importmap"> . Этот тег позволяет вам определить сопоставление имен внешних модулей с соответствующими URL-адресами, что упрощает включение и использование внешних модулей в ваш код.

Чтобы использовать подход <script type="importmap"> , сначала необходимо добавить его в раздел <head> вашего HTML-документа. Внутри тега вы можете определить объект JSON, который сопоставляет имена модулей с соответствующими URL-адресами. Например:

<script type="importmap">
 
{
   
"imports": {
     
"browser-fs-access": "https://unpkg.com/browser-fs-access@0.33.0/dist/index.modern.js"
   
}
 
}
</script>

Этот код определяет один внешний модуль с именем "browser-fs-access" и сопоставляет его с URL-адресом библиотеки браузера-fs-access , размещенной в CDN unpkg. Имея это сопоставление, вы теперь можете использовать ключевое слово import , чтобы включить библиотеку браузера-fs-access в свой код. Обратите внимание, что ключевое слово import доступно только внутри тега script с атрибутом type="module" .

<button>Select a text file</button>
<script type="module">
 
import {fileOpen} from 'browser-fs-access';

 
const button = document.querySelector('button');
  button
.addEventListener('click', async () => {
   
const file = await fileOpen({
      mimeTypes
: ['text/plain'],
   
});
    console
.log(await file.text());
 
});
</script>

Использование тега <script type="importmap"> и ключевого слова import дает несколько преимуществ по сравнению со старыми немодульными подходами к разработке JavaScript. Он позволяет вам четко и явно указывать внешние модули, от которых зависит ваш код, что упрощает понимание и поддержку вашего кода. В целом, использование модулей ES с тегом <script type="importmap"> — это современный и мощный способ включения и повторного использования кода JavaScript в веб-приложениях. Вы можете обнаружить поддержку функций следующим образом:

if (HTMLScriptElement.supports('importmap')) {
 
// The importmap feature is supported.
}

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

  • Хром: 89.
  • Край: 89.
  • Фаерфокс: 108.
  • Сафари: 16.4.

Дальнейшее чтение