具有公共库的多个 VueJS TypeScript 项目答案

【问题标题】：Multiple VueJS TypeScript projects with a common library具有公共库的多个 VueJS TypeScript 项目
【发布时间】：2021-10-19 16:49:01
【问题描述】：

我正在使用 TypeScript 构建两个 VueJS 应用程序，一个是供公众使用的客户端，另一个是我唯一可以用来编辑客户端上显示的数据的管理工具。我正在使用 vue-cli 并运行一个简单的 npm run serve 来构建和测试我的应用程序。

我正在复制大量代码，我想将我的打字稿模型和服务文件移动到两个项目都可以访问的公共库中，但我似乎不知道如何设置它。我在网上只看到了几个 TypeScript 通用库示例，但没有一个符合我的确切情况，我似乎无法将它们翻译到 VueJS 世界。

我宁愿不走 NPM 包路线，因为对于这么简单的事情来说，这似乎有点矫枉过正。

【问题讨论】：

你想要的改变不是那么那么简单，所以 NPM 包并不是真的矫枉过正。它不应该是真正的 NPM 包，可能是来自 git repo 的假包。处理此问题的合适方法是 monorepo。这实际上取决于项目的结构，没有描述。

【解决方案1】：

我能够使用this persons blog post 拼凑出一个解决方案。不过，我花了很长时间才弄清楚如何管理它。

我遇到的一个问题是这个人在他们的 chainWebpack 配置中使用 config.plugin('html) 调用的方式，因为我的文件布局与他们的不同。我现在正式有 2 个 vuejs typescript 项目与第三个 typescript 项目共享引用，而无需构建 NPM 包。

【讨论】：

【解决方案2】：

在这种情况下，我建议遵循 Occam's Razor 并研究重新架构，而不是为仅两个应用程序创建一个公共库（正如您所说，一个 npm 包是多余的）。将您的管理应用程序构建到公共客户端中，但将其隐藏在秘密凭据之后，甚至只能从只有您知道的路由访问。

【讨论】：

一开始我也想过这样做，但是代码库感觉太重了，因为随机位置的角色检查太多。是否根据登录状态隐藏按钮让我感到筋疲力尽。另外，我在管理工具中使用了很多我在客户端中没有使用的依赖项。将它们全部结合起来会炸毁我为客户端提供的初始有效负载大小，而这些东西甚至不会被除我之外的任何人使用。
在这种情况下，我建议遵循this 文档，了解如何使用 git repo 作为 NPM 包。这样你就可以使用 TypeScript 库，使用 NPM 的干净代码实践，同时远离 NPM 注册表
这对于开发目的来说感觉超级笨重。我目前正在一个地方构建所有东西。如果我要这样设置它，我是否需要从我的公共项目中签入代码，然后每次我对公共项目进行更改时执行一次 npm 更新以获取最新信息？让我感到困惑的是，没有更简单的方法可以在 VueJS Typescript 项目之间共享代码。如果我的公共库已经完成，我觉得这是有道理的，但由于它正在积极开发中，对于多年来在软件开发中很常见的东西，感觉就像很多额外的步骤。