如何使用 ESM 导入 Vue Material (Webpack UMD)？

Question

我有一个包含以下内容的 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');
          | })();

我明白了

未捕获的语法错误：请求的模块“/material/vue-material.js”未提供名为“default”的导出

当我把它改成

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

我明白了

Uncaught TypeError: _vue2.default is not a constructor

使用 ESM 导入 Vue 材质库的正确方法是什么？

更新

它似乎确实适用于 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');

更新

似乎不再使用最新版本。如果能找到一个支持原生 ESM 的 UI，那就太好了

Answer 1

如果导入引用vue-material 库，正确的导入方法是：

import VueMaterial from 'vue-material';

并将应用程序与它捆绑在一起。

无法使用原生 ES 模块 (<script type="module">) 导入它。

可以导入构建为 ES 模块的包（例如，vue 的 vue.esm.browser.js）但 vue-material 没有 ES6 入口点。

如果/material/vue-material.js引用vue-material/dist/vue-material.js，则为UMD模块，没有模块互操作的ES模块无法导入。

可以导入的ES模块是vue-material/src/index.js，但不能直接导入，因为包使用的源文件不符合规范（.vue、.scss），需要构建。

在运行时导入vue-materialUMD 模块的一种方法是使用SystemJS 进行模块互操作。

此外，IIFE 是模块范围内的反模式。