Как превратить несколько vue компонентов в один npm пакет? - PullRequest
Новая
       9

Как превратить несколько vue компонентов в один npm пакет?

0 голосов
/ 29 мая 2020

Менеджер проекта в компании, в которой я работаю, сказал мне: взять все глобальные компоненты проекта vue, над которым мы работаем, и превратить их в единый npm пакет, который может каждый, кто работает над проектом. импортировать и начать использовать. по сути, мне нужно взять глобальные компоненты и превратить их в библиотеку компонентов, такую ​​как vuetify, которая устанавливается с использованием npm и затем импортируется из каталога модулей узлов.

enter image description here

Мне было интересно, можете ли вы, ребята, указать мне правильное направление, как этого добиться. заранее спасибо.

1 Ответ

0 голосов
/ 29 мая 2020

Итак, независимо от реализации, главное, что вам нужно, это следовать этому руководству о том, как создать npm пакет https://docs.npmjs.com/creating-and-publishing-private-packages

Затем

Вы создаете папку sr c. В sr c вы создадите папку с именем «components» со всеми вашими -duh- components.

В папке sr c вы также создадите файл index. js, оттуда вы будете экспортировать свои компоненты. 

export { default as VDataTable } from './components/VDataTable.vue'
// ...etc

Option1

Если вы используете бандлер для своих проектов, и вы точно знаете, что все ваши кодовые базы будут используйте сборщик, вы можете просто создать папку с пакетом. json.

В вашем пакете. json тогда вы будете 

  "module": "src/index.js",
  "main": "src/index.js"

В этом сценарии вы позволяете ваш основной сборщик проекта (который использует пакет) перекомпилирует все пакеты для вас (babel, однофайловые компоненты)

Вариант 2

Если у вас есть абсолютно не имея представления о характере проектов, которые могут использовать вашу библиотеку, вам понадобится сборщик для ваших компонентов.

Примером может быть Rollup.

Я предлагаю эти 2 руководства.

https://rollupjs.org/

https://rollup-plugin-vue.vuejs.org/

Длинная история шо rt, Rollup скопирует для вас запрошенные вами файлы (js и css), и вам нужно будет сделать их доступными из вашего пакета. json

  "module": "src/dist/library.esm.js",
  "main": "src/library.common.js"

И затем вы можете выпустить ваш пакет. Возможно, в частном порядке, иначе вас могут уволить: P

...