Упаковка Angular или Vue в один файл для использования на стороннем сайте?

Question

[dinya17]

Есть задача - Создать плагин для размещения на сторонних сайтах. Для его реализации хотелось бы использовать Angular или Vue. Но нет познаний в том как упаковать это все в 1 файл чтобы можно было , подключив 1 js файл, отрисовать все нужные меню в требуемом месте на сайте.
Т.е. плагин по типу Яндекс карт.

Answer 1

[Evgeny Kulakov]

Можете сделать например так:
в своем скрипте создать глобальный объект и сделать функцию инициализации, которая создаст экземпляр vue и привяжет к соответствующему элементу на сайте.

В общих чертах как-то так:

на сайте:

<script src="path_to_script"></script>
<script type="text/javascript">
   var vm;
   vm = vuecomp.init("vuecomponent", {
            // some options
   });
</script>

<div id="vuecomponent"></div>

в своем скрипте в точке входа:

import Vue from 'vue'

// ...

const vuecomp =  {
  init(elementId, options) {
            return new Vue({
              el: `#${elementId}`,
              // ...
            })
  }
}

export default vuecomp

И собираем библиотеку используя webpack например.