Эта страница переведена с помощью Cloud Translation API.

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

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

Thomas Steiner

Модули 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-адресом библиотеки browser-fs-access , размещённой в CDN unpkg. После этого сопоставления вы можете использовать ключевое слово import для включения библиотеки browser-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.
}

Browser Support

Source

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