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

Question

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

商业案例

我们有一些通用的 Vuetify 组件，我想用“通用组件”Vue 插件公开这些组件，并允许我们所有的 Vuetify 应用程序提取这些通用组件。我可以通过打包插件并创建依赖关系并推送到私有(private) npm 存储库或提交/推送到私有(private) git 存储库来做到这一点。问题在于开发周期和开发经验。

在本地开发环境中对插件的典型开发更改需要:

• (common-components) yarn build(创建 dist/common-components.umd.js)
• (公共(public)组件)(部署到私有(private) npm 代表或提交/推送到 git 仓库)
• (application A) yarn upgrade common-components拉取最新
• (应用程序 A)yarn serve

必须有比这更好的开发周期，对吗？或者我真正的问题是我们需要更好地将插件与我们的应用程序分离？

我希望得到但失败了的解决方案

yarn 链接或 npm 链接

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

我希望有一个解决方案可以解决这个问题!

Answer 1

多亏了 yalc，我不久前完成了这种设置.

本质上是:

• 在你自己的包上工作，设置它(如果我没记错的话，使用 yalc 链接)
• 当对包进行更新时，我们让它自动 yalc publish --push --changed 就像使用 linter 一样
• 你可以使用 pre-push git hook 来 babelify 你的包
• 在主机主应用程序上，我们有一个 nodemon 正在运行以检查 yalc 是否发布了任何更改，如果是这样，只需重新加载应用程序
• 仍然在主应用程序上，我们在 pull 上使用了一个 git 钩子(Hook)，让它获取 yalc.lock 存储上的最新更改(使用 yalc update)

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