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

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

5 голосов
/ 26 апреля 2019

Меня интересует использование нескольких библиотек 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>

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

import Vue from 'vue'

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

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

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

Ответы [ 2 ]

2 голосов
/ 18 мая 2019

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

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

1 голос
/ 27 апреля 2019

Я обнаружил ожидающее расширение, которое обещает заполнить этот пробел: 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

...