如何在本地Vue应用程序中热重载本地Vue插件？

Question

有没有办法在使用yarn serve（可能使用webpack / vuetify-loader）的本地Vuetify应用程序的本地npm依赖项上进行热重载？

商业案例：

我们有一些共同的Vuetify组件，我想通过“common-components”Vue插件公开这些组件，并允许所有Vuetify应用程序拉取这些共同组件。我可以通过打包插件并创建依赖项，然后推送到私有npm仓库或提交/推送到私有git仓库来实现这一点。问题在于开发周期和开发体验。

在本地开发环境中对插件进行典型开发更改需要执行以下操作：

- (common-components) yarn build（创建dist/common-components.umd.js） - (common-components) （部署到私有npm仓库或提交/推送到git仓库） - (应用程序A) yarn upgrade common-components以获取最新版本 - (应用程序A) yarn serve 难道没有比这更好的开发周期吗？还是我的真正问题是我们需要更好地将插件与我们的应用程序解耦？

期望的解决方案但失败的方法：

yarn-link 或 npm-link

我能够使这个方法工作，但NPM依赖关系仍然解析为文件夹的package.json，其中包含一个"main": "dist/common-components.umd.js"。这要求我执行yarn build，该命令会删除文件并重新构建它。当文件被删除时，“当前使用yarn serve运行的应用程序A”将中断并且无法恢复。我必须关闭服务器，然后再次运行yarn serve。

我希望有一种解决方案可以解决这种情况！

- Garrett

---

你解决这个问题了吗？ - siyb

目前还没有一个很好的解决方案。我们最终使用了“yalc”，它必须重建整个依赖项，将依赖项推送到其他项目...但它确实可以自动重新加载。问题在于构建依赖项需要50-60秒的时间。当您想要快速查看更改时，这并不理想。 - Garrett

Garret：我们现在开始使用 Vite，它似乎没有这些问题 ;) - siyb

Answer 1

我之前通过 yalc 完成了这种设置。

基本上是这样的：

• 先在自己的包上工作，设置它（如果我没记错的话，要用 yalc link）
• 当包有更新时，我们会让它自动执行 yalc publish --push --changed，就像使用 linter 一样
• 你可以使用 pre-push git hook 来对你的包进行 babelify 处理
• 在主机的主应用程序上，我们运行了一个 nodemon 来检查是否有 yalc 发布了任何更改，如果是这样，就重新加载应用程序
• 在主应用程序上，我们还使用了一个 git hook 来在 pull 时获取 yalc.lock 存储库中的最新更改（使用 yalc update）

我之前做过这个，但是已经有一段时间了，所以记忆不是很清晰。但据我所记，它的运行还算顺利，只需要在其他服务的基础上运行两个服务器（一个用于发布包，另一个用于主应用程序获取更改）。它仍然比使用yarn或npm的link更好。

- kissu