В нашей общей модульной системе операторы импорта модулей сопоставляются с конкретными файлами (версиями) через среду выполнения или связанные инструменты сборки. Пользователю нужно только написать спецификатор модуля (обычно имя пакета) непосредственно в операторе, и модуль может быть обработан автоматически.Node.jsimport

const dayjs = require('dayjs') // CommonJS

import dayjs from 'dayjs'; // webpack

Поскольку мы уже знакомы с этим способом импорта пакетов из , мы должны сначала пройти этап сборки, чтобы убедиться, что код, написанный таким образом, может работать в браузере.npm

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

Мы можем указать a по метке в. HTML<script type="importmap">Import maps

<script type="importmap">
{
  "imports": {
    "dayjs": "https://cdn.skypack.dev/[email protected]",
  }
}
</script>

Затем мы можем использовать спецификацию внутри тега для импорта модуля:<script type="module">ES Module

<script type="module">
  import dayjs from 'dayjs';

  console.log(dayjs("2023-04-01").format("YYYY-MM-DD"));
</script>

С выпуском движок также поддерживается. Safari 16.4WebKitImport Mpas.

На данный момент поддерживаются все три браузерных движка.Import MpasBlink、Gecko、WebKit

Когда он был впервые запущен, я уже подробно представил его в своей предыдущей статье, и вы можете прочитать его, если вам интересно:Import Maps

Как элегантно реализовать импорт модулей без инструментов сборки?



ES2023 уже здесь, спешите учиться
Предисловиеjavascript.plainenglish.io





Главные тренды JavaScript в 2023 году: фреймворки и библиотеки
Как говорится, фреймворков и библиотек для разработчиков столько же, сколько звезд на Млечном Пути. …javascript.plainenglish.io



Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.