Способ горячей перезагрузки локального плагина Vue в локальном приложении Vue?

Есть ли способ, чтобы горячая перезагрузка происходила в локальной зависимости npm локального приложения Vuetify с использованием yarn serve (которое, вероятно, использует webpack/vuetify-loader)?

БИЗНЕС-КЕЙС

У нас есть некоторые общие компоненты Vuetify, которые я хотел бы предоставить с помощью подключаемого модуля Vue с общими компонентами и позволить всем нашим приложениям Vuetify извлекать эти общие компоненты. Я могу сделать это, упаковав плагин, создав зависимость и отправив его в частное репозиторий npm или зафиксировав/отправив в частное репозиторий git. Проблема заключается в цикле разработки и опыте разработки.

Типичное изменение разработки плагина в локальной среде разработки требует:

  • (common-components) yarn build (для создания dist/common-components.umd.js)
  • (common-components) (развертывание в частном репозитории npm или фиксация/передача в репозиторий git)
  • (приложение A) yarn upgrade common-components, чтобы получить последнюю
  • (приложение А) yarn serve

Должен быть лучший цикл разработки, не так ли? Или моя настоящая проблема в том, что нам нужно лучше отделить плагин от наших приложений?

РЕШЕНИЕ, НА КОТОРОЕ Я НАДЕЯЛАСЬ, НО НЕ ПРОШЛО

yarn-ссылка или npm-ссылка

Мне удалось заставить это работать, но зависимость NPM по-прежнему разрешается в папку package.json, которая имеет "main": "dist/common-components.umd.js". Это требует, чтобы я сделал yarn build, который удалит файл и перестроит его. Когда файл удаляется, приложение А, работающее в данный момент с yarn serve, ломается и становится невосстановимым. Я должен выключить сервер и снова выполнить yarn serve.

Я надеюсь, что есть решение, которое решает этот сценарий!


vue.js vuetify.js npm-link webpack-dev-server hot-reload
person Garrett    schedule 19.02.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я сделал такую ​​настройку некоторое время назад благодаря yalc.

Это было по существу:

  • работайте над своим собственным пакетом, настройте его (с yalc link, если я правильно помню)
  • когда в пакете было сделано обновление, оно автоматически yalc publish --push --changed как с линтером
  • вы можете использовать хук pre-push git для детализации вашего пакета
  • в главном приложении хоста у нас был запущен nodemon, чтобы проверить, опубликовал ли yalc какие-либо изменения, и если это так, просто перезагрузите приложение.
  • по-прежнему в основном приложении мы использовали git-хук для pull, чтобы он получал последние изменения в хранилище yalc.lock (с yalc update)

Я сделал это некоторое время назад, поэтому я не очень хорошо это помню, но, насколько я помню, он работал довольно хорошо, просто нужно запустить 2 сервера (один в пакете для публикации и один в вашем основном приложении для получения изменений ) в дополнение к другим вашим услугам. Все еще работает лучше, чем пряжа или npm links.

person kissu    schedule 20.02.2021