在本地 Vue 应用程序中热重载本地 Vue 插件的方法？

问题描述

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

业务案例

我们有一些常用的 Vuetify 组件，我想通过“常用组件”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。

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

解决方法

感谢yalc，我不久前已经完成了这种设置。

本质上是：

• 处理你自己的包，设置它（如果我没记错的话，用 yalc link）
• 当对包进行更新时，我们让它像使用 linter 一样自动yalc publish --push --changed
• 你可以使用 pre-push git hook 来对你的包进行 babelify
• 在宿主主应用程序上，我们运行了 nodemon 以检查 yalc 是否发布了任何更改，如果是，只需重新加载应用程序
• 仍然在主应用程序上，我们在 pull 上使用了一个 git 钩子，让它获取 yalc.lock 商店（使用 yalc update）上的最新更改

我不久前做过，所以我记不太清楚了，但据我所知它运行得很好，只需要运行 2 个服务器（一个在要发布的包上，另一个在您的主应用程序上）获取更改）在您的其他服务之上。仍然比 yarn 或 npm links 更好。