Как построить модуль JS, который можно использовать на странице напрямую?

Question

Я автор vue-sequence . Эта библиотека построена с использованием vue-cli и экспортирует библиотеку в формате umd. Чтобы использовать эту библиотеку, я должен использовать веб-пакет, чтобы он работал на веб-странице, например:

import { SeqDiagram, Store } from "vue-sequence";
...
Vue.use(vuex);
Vue.component("seq-diagram", SeqDiagram);
let store = new vuex.Store(Store);

Полный пример использования можно найти здесь: https://codesandbox.io/s/5v4v78w1wk.

Я хотел бы иметь возможность использовать его непосредственно на странице (но все еще поддерживать его использование в качестве модуля узла), например:

<script src="vue-sequence.js" />

<script>
vueSequence.processAll()
</script>

Я понимаю, что мне нужно определить этот метод processAll()где-то. Мой вопрос о том, как упаковать эту библиотеку.

Answer 1

Я попробовал несколько вещей. Я думаю, я знаю, как umd работает лучше. Если мы непосредственно включим библиотеку umd на веб-страницу, библиотека создаст поле для глобальной переменной window (в данном случае vue-sequence и может быть вызвано через окно ['vue-sequence']).

При следующей html-конфигурации

<title>vue-sequence demo</title>
<script src="./vue-sequence.umd.js"></script>

<script>
console.log(window['vue-sequence'])
</script>

Будет распечатан экспортированный модуль. Мне достаточно знать об этом, чтобы продолжить работу над решением, чтобы добавить функцию processAll().