Как импортировать Vue Material (Webpack UMD) с помощью ESM? - PullRequest
Новая
       22

Как импортировать Vue Material (Webpack UMD) с помощью ESM?

0 голосов
/ 10 июня 2019

У меня есть файл pug со следующим ... 

#footer
    script(type="module")
          | import Vue from '/vue/vue.esm.browser.js'
          | import { JRGVue } from '/ui/index.js'
          | import VueMaterial from '/material/vue-material.js'
          | (()=>{
          |     const vue = new JRGVue(Vue);
          |     vue.app.use(VueMaterial);
          |     vue.app.$mount('#jg-app');
          | })();

Я получаю

Uncaught SyntaxError: Запрошенный модуль '/material/vue-material.js'не обеспечивает экспорт с именем 'default'

Когда я изменяю его на 

import * as VueMaterial from '/material/vue-material.js'

, я получаю 

Uncaught TypeError: _vue2.default is not a constructor

Как правильно импортироватьбиблиотека материалов Vue, использующая ESM?

Обновление

Кажется, она работает с Vuetify 

#footer
    script(type="module")
          | import Vue from '/vue/vue.esm.browser.js'
          | window.Vue = Vue;
    script(type="module")
          | import * as Vuetify from '/vuetify/vuetify.js';
          | import { JRGVue } from '/ui/index.js';
          | Vue.use(Vuetify);
          | const vue = new JRGVue(Vue);
          | vue.app.$mount('#jg-app');

1 Ответ

1 голос
/ 10 июня 2019

В случае, если импорт ссылается на библиотеку vue-material, правильный способ импортировать ее: 

import VueMaterial from 'vue-material';

и связать приложение с ней.

Невозможно импортировать его с собственными модулями ES (<script type="module">).

Можно импортировать пакеты, которые были построены как модули ES (например, vue.esm.browser.js для vue), но vue-material не имеетТочка входа ES6.

В случае, если /material/vue-material.js относится к vue-material/dist/vue-material.js, это модуль UMD, который не может быть импортирован модулем ES без взаимодействия модуля.

Модуль ES, который может быть импортирован, vue-material/src/index.js, но его нельзя импортировать напрямую, поскольку пакет использует исходные файлы, которые не соответствуют спецификациям (.vue, .scss) и должны быть собраны.

Способ импорта vue-material модуля UMD всреда выполнения должна использовать SystemJS для взаимодействия модулей.

Кроме того, IIFE является антипаттерном в области действия модуля.

...