javascript - 前端项目变大如何分离和抽离公共模块进行管理？

Question

目前使用的是git submodule。
原来是一个项目A，但是呢，随着业务的发展，header和footer其他想也要用，于是抽出来了B，后来项目中一个模块功能比较复杂也抽出来了C。
现在是header部分作为submodule,关联到第A和C中。
B可以共享A和C的store。
但是A和C是独立的，很多相公的功能要在两个项目中写，很少麻烦。
另外关联B，因为自动关联的是commitid，所以需要切换到对应的分支。
如果需求设计到三个项目，非常麻烦，需要在三个项目上建分支，然后合分支，光切分支都麻烦的要死。

这种情况，使用什么方式更合适，有经验的大佬推荐下。

Answer 1

使用 Monorepo 架构

Monorepo 是一种将多个相关项目放在同一个版本控制仓库中的方法。有如下优势：

• 共享代码更容易
• 不需要在多个仓库间切换
• 可以同时对多个项目进行更改
• 简化了依赖管理

工具如 lerna、nx、pnpm，可以帮助管理 Monorepo。

Answer 2

针对你描述的问题，前端项目随着业务的发展而变得复杂，需要进行模块化分离和管理，同时减少重复代码和维护成本。在这种情况下，除了继续使用 Git Submodule 之外，还可以考虑以下几种更现代和灵活的方法来管理和组织你的项目结构：

1. Monorepo（单仓库管理多个包）

使用 Monorepo（单仓库）模式，即将所有相关的前端项目（如A、B、C）放在同一个 Git 仓库中。这种方式可以通过工具如 Lerna 或 Yarn Workspaces 来管理。这些工具支持跨包依赖管理、版本同步和发布流程简化。

• 优点：

  • 简化依赖管理，包之间的依赖可以精确控制。
  • 统一的版本控制和发布流程。
  • 易于进行跨项目的重构和代码共享。

• 缺点：

  • 仓库体积可能变得很大，影响克隆和拉取速度。
  • 需要工具支持来管理依赖和发布。

2. NPM/Yarn 包

将可复用的部分（如 header、footer 等）打包成独立的 npm 包或 Yarn 包，并在需要的地方通过 npm 或 Yarn 安装。

• 优点：

  • 易于版本控制和依赖管理。
  • 可以在多个项目中复用，减少代码重复。
  • 便于团队协作，不同团队可以专注于不同的包。

• 缺点：

  • 依赖外部源（npm/Yarn 仓库），可能影响构建速度。
  • 需要维护包的文档和更新日志。

3. Git Subtree

考虑使用 Git Subtree 替代 Git Submodule。Git Subtree 允许你将一个 Git 仓库作为子目录合并到另一个 Git 仓库中，并且可以保持这种关系的更新更加简单。

• 优点：

  • 相对于 Git Submodule，Subtree 的更新和管理更为直观和简单。
  • 避免了 Submodule 中复杂的引用和同步问题。

• 缺点：

  • 仍然需要手动处理合并和更新。
  • 可能需要额外的脚本来自动化这些过程。

结论

根据你的情况，如果项目之间共享代码较多，且需要频繁更新和维护，推荐使用 Monorepo 搭配 Lerna 或 Yarn Workspaces。这种方式可以极大地简化跨项目依赖和版本控制，提高开发效率。如果共享的代码模块较为独立，且不需要频繁更新，可以考虑将其打包为 npm/Yarn 包进行分发。对于 Git Submodule 的问题，如果更新和管理的复杂性成为瓶颈，可以考虑切换到 Git Subtree。