<script type="importmap">

Значение атрибута type элемента <script> указывает, что тело элемента содержит карту импорта.

Карта импорта — это JSON-объект, который позволяет разработчикам контролировать, как браузер разрешает спецификаторы модулей при импорте JavaScript-модулей. Он предоставляет отображение между текстом, используемым в качестве спецификатора модуля в import операторе или import() операторе, и соответствующим значением, которое заменит текст при разрешении спецификатора. JSON-объект должен соответствовать формату представления карты импорта в формате JSON.

Карта импорта используется для разрешения спецификаторов модулей в статических и динамических импортах и, следовательно, должна быть объявлена и обработана перед любыми элементами <script>, которые импортируют модули, используя спецификаторы, объявленные в карте. Обратите внимание, что карта импорта применяется только к спецификаторам модулей в import операторе или import() операторе для модулей, загруженных в документы; она не применяется к пути, указанному в атрибуте src элемента <script>, или к модулям, загруженным в рабочие процессы или работники.

Для получения дополнительной информации см. раздел Импорт модулей с помощью карт импорта в руководстве по JavaScript-модулям.

<script type="importmap">
  // JSON object defining import
</script>

Атрибуты src, async, nomodule, defer, crossorigin, integrity, и referrerpolicy не должны быть указаны.

Обрабатывается только первая карта импорта в документе с встроенным определением; все дополнительные карты импорта и внешние карты импорта игнорируются.

TypeError

Определение карты импорта не является объектом JSON, ключ importmap определен, но его значение не является объектом JSON, или ключ scopes определен, но его значение не является объектом JSON.

Браузеры генерируют предупреждения в консоли для других случаев, когда карта импорта JSON не соответствует схеме карты импорта.

Событие error генерируется для элементов script с type="importmap" , которые не обрабатываются. Это может произойти, например, если загрузка модуля уже началась, когда обрабатывается карта импорта, или если на странице определено несколько карт импорта.

При импорте модуля JavaScript, как оператор import, так и оператор import() имеют «спецификатор модуля», указывающий на импортируемый модуль. Браузер должен иметь возможность разрешить этот спецификатор до абсолютного URL, чтобы импортировать модуль.

Например, следующие операторы импортируют элементы из спецификатора модуля "./modules/shapes/square.js", который является путем, относительным к базовому URL документа, и спецификатора модуля "https://example.com/shapes/circle.js", который является абсолютным URL.

import { name as squareName, draw } from "./modules/shapes/square.js";
import { name as circleName } from "https://example.com/shapes/circle.js";

Карты импорта позволяют разработчикам указывать (почти) любой текст, который они хотят, в спецификаторе модуля; карта предоставляет соответствующее значение, которое заменит текст при разрешении спецификатора модуля.

Нижеприведённая карта импорта определяет ключ imports, который имеет «карту спецификаторов модулей» со свойствами square и circle.

<script type="importmap">
  {
    "imports": {
      "square": "./module/shapes/square.js",
      "circle": "https://example.com/shapes/circle.js"
    }
  }
</script>

С помощью этой карты импорта мы можем импортировать те же самые модули, что и выше, но используя «модули без пути» в наших спецификаторах модулей:

import { name as squareName, draw } from "square";
import { name as circleName } from "circle";

Ключ карты спецификаторов модуля также может быть использован для переназначения префикса пути в спецификаторе модуля. Обратите внимание, что в этом случае свойство и сопоставленный путь должны оба иметь конечный слеш (/).

<script type="importmap">
  {
    "imports": {
      "shapes/": "./module/shapes/",
      "othershapes/": "https://example.com/modules/shapes/"
    }
  }
</script>

Затем мы можем импортировать модуль окружности, как показано ниже.

import { name as circleName } from "shapes/circle.js";

Ключи спецификаторов модулей не обязательно должны быть именами из одного слова ("имена-значения"). Они также могут содержать или заканчиваться разделителями путей, быть абсолютными URL-адресами или относительными URL-путями, начинающимися с /, ./, или ../.

{
  "imports": {
    "modules/shapes/": "./module/src/shapes/",
    "modules/square": "./module/src/other/shapes/square.js",
    "https://example.com/modules/square.js": "./module/src/other/shapes/square.js",
    "../modules/shapes/": "/modules/shapes/"
  }
}

Если в карте спецификаторов модуля имеется несколько ключей, которые могут совпадать, то будет выбран наиболее конкретный ключ (то есть тот, у которого путь/значение длиннее).

Спецификатор модуля ./foo/../js/app.js будет разрешён до ./js/app.js перед сопоставлением. Это означает, что ключ спецификатора модуля ./js/app.js будет совпадать со спецификатором модуля, даже если они не совсем идентичны.

Вы можете использовать ключ scopes для предоставления отображений, которые используются только в том случае, если сценарий, импортирующий модуль, содержит определённый URL-путь. Если URL загружаемого сценария соответствует указанному пути, то будет использоваться отображение, связанное со сферой действия. Это позволяет использовать разные версии модуля в зависимости от того, какой код выполняет импорт.

Например, приведённая ниже карта будет использовать только карту со сферой действия, если URL загружаемого модуля содержит путь: "/modules/customshapes/".

<script type="importmap">
  {
    "imports": {
      "square": "./module/shapes/square.js"
    },
    "scopes": {
      "/modules/customshapes/": {
        "square": "https://example.com/modules/shapes/square.js"
      }
    }
  }
</script>

Если нескольким сферам действия соответствует URL-адрес ссылки, то используется путь с самой узкой сферой действия (имя ключа области действия с самым длинным именем). Браузер обращается к следующему по степени конкретности пути со сферой действия, если соответствующий спецификатор отсутствует, и так далее, в конечном итоге обращаясь к карте спецификаторов модулей в ключе imports.

Вы можете использовать ключ integrity для предоставления сопоставления для модуля метаданных целостности. Это позволяет вам гарантировать целостность динамически или статически импортированных модулей. integrity также позволяет предоставить резервный вариант для модулей верхнего уровня или предварительно загруженных модулей, в случае если они еще не включают атрибут integrity.

Ключи карты представляют URL-адреса модулей, которые могут быть абсолютными или относительными (начинающимися с /, ./, или ../). Значения карты представляют метаданные целостности, идентичные тем, которые используются в значениях атрибута integrity.

Например, карта ниже определяет метаданные целостности для модуля square.js (непосредственно) и его базового спецификатора (транзитивно, через ключ imports).

<script type="importmap">
  {
    "imports": {
      "square": "./module/shapes/square.js"
    },
    "integrity": {
      "./module/shapes/square.js": "sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
    }
  }
</script>

• Модули JavaScript > Импорт модулей с помощью import maps
• Атрибут type HTML-элементов <script>
• Заявление import
• Оператор import()