如何在没有 monorepo 的情况下组织多个 vue 应用程序中的代码组件共享

问题描述

我们正在计划三个类似的 vue 项目。我们已经知道我们将能够在所有这些中重用大量代码(尤其是 vue SFC 和简单的 js 辅助函数),我们正在寻找一种在它们之间共享代码的正确方法

不幸的是,项目的范围相当不同,并且由于在读/写权限和可见性管理方面的限制,monorepo 不是一个选项。因此,我们计划将可重用部分作为单独的存储库(并且很可能是私有 npm 包)来处理,这似乎是一种简单的方法然而,问题是:我们如何创建一个方便的设置,让我们能够在其中一个父项目的范围内处理共享组件?

项目 A [project-repo-a]

  • A 的项目特定内容
  • 私有包 A [package-repo-a](可在项目 A 中方便地编辑)
  • 私有包 B [package-repo-b](可在项目 A 中方便地编辑)

项目 B [project-repo-b]

  • B 的项目特定内容
  • 私有包 B [package-repo-b](可在项目 B 中方便地编辑)
  • 私有包 C [package-repo-c](可在项目 B 中方便地编辑)

在我们的 PHP 项目中,有一个简单的解决方案,我们只需要通过带有首选源选项的 Composer 可重用部分,该选项提供完整的 git 存储库,可以直接在父应用程序中进行处理。然而,据我们所知,在 npm 或 yarn 中没有首选源的东西。那么我们如何才能实现所需的设置呢? (或者我们是否忽略了这种设置的主要缺点?)

我们已经研究/考虑了以下内容(没有找到合适的方法):

  • yarn / npm 链接 我们明白,我们可以使用一般的链接,但这似乎是一种非常不方便的方法,同时不断开发共享组件(和总是不得不发布它们以反映最新的变化)。
  • yarn workspaces / lerna: 似乎最接近我们想要的东西,但是它们似乎(或明确地)是为 monorepo 方法设计的。最后,他们没有提供将包的 git 源(在单独的存储库中)实际获取到父项目中的解决方案(因为没有 --prefer-source 的东西) - 是吗?
  • 另外使用 composer: 只需使用 composer 提取 git 源并从 composer 供应商文件夹创建纱线工作区。但是,这显然是一种hacky 方式,并且在整个依赖项管理方面听起来很容易出错
  • 使用 yarn post-install 脚本 来拉取所需私有包的 git 源代码,但作为作曲家的方式,这似乎是相当不可预测的模块解析、依赖管理等。
  • 使用 git 子模块和纱线工作区: 可能是一个解决方案。老实说,我们对 git 子模块完全没有经验,乍一看它看起来不是很直观。如果没有其他办法,我们无论如何都会考虑使用这种方法

要明确这一点:我们不会询问这些方法中的一种或另一种是否“最佳”。我们感觉他们都不是正确的。问题是:我们是否忽略了在我们的场景中使用 npm、yarn 或其他包管理器/依赖项管理解决方案的技术上干净且经过验证的方法

解决方法

Git X-Modules 是一种工具,旨在完全满足您的要求。下面是解释它的 a video。但是,它很新,因此不能真正被视为“已证明”:-) 不过,如果您考虑尝试一下,我们很乐意听到您的反馈!

(您可能从上一句中猜到,我是开发团队的一员。)