Использование модулей ES6 без шага Transpiler/Bundler

Question

Я заинтересован в использовании нескольких библиотек JS, не зависящих от npm-инструментов и дополнительных этапов комплектации.

Благодаря поддержке модулей ES6 в браузере я могу использовать такие модули:

<script type="module">
    import Vue from 'https://unpkg.com/vue@2.6.0/dist/vue.esm.browser.min.js';
    new Vue({...});
</script>

Что хорошо, когда требуемый модуль не имеет транзитивных зависимостей. Но обычно эти модули из мира pre-ES6 делают это так:

import Vue from 'vue'

Который, кажется, не работает в современных браузерах. Я пропускаю какую-то опцию, чтобы связать спецификатор модуля с определенным URL, скажем, как атрибут <script> тег.

Прагматичным решением было бы просто вернуться к использованию сборок модулей UMD, которые устанавливаются в глобальное пространство имен и позволяет мне явно перечислить все зависимости в основном файле HTML.

Но мне интересна концептуальная история. Инструменты связывания сообщают об этом, поскольку они будут устаревшими в будущем, когда появится собственная поддержка, но на данный момент поддержка браузеров довольно бесполезна, поскольку экосистема, вероятно, не всегда будет переходить на импорт модулей по относительным путям.

Answer 1

Для функций модуля ES без использования упаковщика в "большинстве" браузеров попробуйте es-module-shims:

• https://github.com/guybedford/es-module-shims

Это добавляет -shim вариант текущей спецификации карты импорта. Которые могут быть заполнены на браузеры с базовой поддержкой модуля ES.

Answer 2

Я нашел ожидающее расширение, которое обещает заполнить этот пробел: https://github.com/WICG/import-maps

Импорт карт позволяет определить соответствие между короткими спецификаторами модуля и URL:

<script type="importmap">
{
  "imports": {
    "vue": "https://unpkg.com/vue@2.6.10/dist/vue.esm.browser.js" 
  }
}
</script>

Единственным недостатком является то, что на данный момент они поддерживаются только в последнем Chrome 74 и скрыты за экспериментальным флагом: chrome://flags/#enable-built-in-module-infra