构建 React Monorepo 的 5 种方法
构建 React Monorepo 的 5 种方法
构建生产级 React monorepo 的最佳工具：从快速构建到代码共享和依赖关系。
今天比以往任何时候都更需要一个支持 React 应用程序系统开发的 monorepo 架构。
当团队构建多个不同的应用程序、数十个“微前端”（即功能和体验）以及数百个较小的组件时——传统的 repo 架构将无法做到。
代码共享等问题开始出现，因为不同的应用程序需要使用和使用相同的组件、功能，甚至是彼此。
工具、技术和版本的标准化成为一个严重的问题，系统中依赖项的管理也是如此。甚至您构建应用程序和运行常见开发任务的方式也需要重新配置。
自然，在需要的地方——自然提供。或者在这种情况下，开源社区为我们提供了一些非常棒的工具来解决这个问题。
从下一代工具，如 少量 让您在一个工作空间中轻松构建和管理任意数量的应用程序、功能和组件，并通过设计实现无限代码共享，对于像 NX 这样的超级智能构建工具，还有许多令人兴奋的选项可供探索。
在下面的列表中，我总结了我对 ReactJS monorepo 架构的前 5 个选择，以及一个你永远不应该使用的过去的奖励工具。
享受吧，请随时评论和建议更多工具或分享您的经验。祝阅读愉快
1. 位
少量 是用于带有 React 应用程序和组件的 monorepo 的下一代工具。
简而言之，它解决了 monorepo 的关键问题：
- 工作区和组件级别的配置
- 通过可组合性实现更高级别的代码共享
- 代码、技术和开发任务的标准化
- 对组件/功能/体验的所有权
- 在图上构建、测试和部署更改
- 在应用程序/组件级别自动定义和管理依赖项
- 大规模保持简单的开发体验
[ 
](https://bit.dev)Bit’s website is just another React app in the codebase
只需几个 CLI 命令，您就可以使用 React 应用程序、组件库、包和超高性能构建和测试管道设置整个 monorepo，这些管道几乎可以与任何可能的测试工具一起使用。
$ bit new react my-workspace $ bit create react-app apps/my-react-app 创建了 1 个组件
我的名字.my-scope/apps/my-react-app
位置：我的范围/应用程序/我的反应应用程序
环境：teambit.harmony/<aspect> （由模板设置） $ 位运行应用程序/我的反应应用程序 应用程序/my-react-app 应用程序正在运行[ http://localhost:3000](http://localhost:3000)
Bit 与其他 monorepo 工具的不同之处在于其模块化和可组合性。对于 Bit Apps，页面、功能、后端模块和 UI 元素都是“组件”。在 Bit 工作区中，您可以通过简单而丰富的开发体验创建和组合组件、应用程序和项目。
组件不耦合到工作空间；您可以从工作区动态创建、获取和导出组件，并且只在一个小而简单的代码库中处理您需要的内容。每个组件就像一个“迷你项目”，可以独立开发、版本控制、发布、测试等。
少量 流畅地处理和自动化诸如包和依赖项之类的事情，以创建非常简单且可扩展的开发体验，即使对于 lrge monorepo 也是如此。组件开发环境和模板等功能可帮助您轻松定义和管理许多组件和应用程序的配置。
Bit 与 TypeScript 以及现代 Web 生态系统中的几乎所有技术一起使用，用于测试或 linting，甚至与 React Native 一起使用。您可以很轻松地扩展它以添加新工具和工作流程。
你可以 在这里用模板试试 .
对于每个应用程序和组件，Bit 会自动定义和管理依赖关系、包依赖关系和开发/对等依赖关系。 gosht 依赖和冲突版本等问题将不再存在。当您更新一个组件时，Bit“知道”还应该构建哪些其他组件，并会提示您运行命令来单独测试、构建和更新它们——因此构建变得比以往更快、更并行、更安全。
Watch the creator of pnpm explain monorepo dependencies with bit
[
使用 Bit 进行无痛的 monorepo 依赖管理
简化 monorepo 中的依赖管理，以避免幻像依赖和版本的问题。学习关于…
比特云
](https://bit.cloud/blog/painless-monorepo-dependency-management-with-bit-l4f9fzyw)
少量 **** 还解决了 monorepo 的另外两个主要问题： 可发现性 和 协作 .每个组件都可以托管在一个范围内（例如“设计”“计费”“搜索”“base-ui”等），每个开发人员都可以访问、搜索、探索、可视化使用和安装组件。
[ 
入门 → 安装 Bit 并创建一个工作区：
[
文档 |开始使用
创建工作空间并开始工作
位开发
](https://bit.dev/docs/getting-started/installing-bit/installing-bit)
2.NX
NX 是 React monorepos 的强大构建工具。
它自动执行开发人员必须手动重复的任务，包括计算缓存、增量构建、构建自动化等功能，还包括 与赛普拉斯的插件集成 .
像 Bit NX 创建一个工作区，其中包含许多项目的项目的 monorepo 设置。
我的/
├── 应用程序/
│ ├── 全部/
│ │ ├── src/
│ │ │ ├── app/
│ │ │ ├── 资产/
│ │ │ ├── 环境/
│ │ │ ├── favicon.ico
│ │ │ ├── index.html
│ │ │ ├── main.tsx
│ │ │ ├── polyfills.ts
│ │ │ └── styles.css
│ │ ├── .babelrc
│ │ ├── .browserslistrc
│ │ ├── .eslintrc.json
│ │ ├── is.config.ts
│ │ ├── project.json
│ │ ├── tsconfig.app.json
│ │ ├── tsconfig.json
│ │ └── tsconfig.spec.json
│ └── 全e2e/
│ ├── src/
│ │ ├── 灯具/
│ │ │ └── example.json
│ │ ├── e2e/
│ │ │ └── app.cy.ts
│ │ └── 支持/
│ │ ├── app.po.ts
│ │ ├── commands.ts
│ │ └── e2e.ts
│ ├── .eslintrc.json
│ ├── cypress.config.ts
│ ├── project.json
│ └── tsconfig.json
├── 库/
├── 工具/
├── .eslintrc.json
├── .prettierrc
├── babel.config.json
├── is.config.ts
├── is.preset.js
├── nx.json
├── package.json
├── README.md
├── tsconfig.base.json
└── 工作区.json
NX 创建存储库中所有项目之间的依赖关系图。直观地探索此图有助于获得代码架构的高级视图。与 Bit 不同的是，该图不可视化或指示工作区中不同组件之间的关系。
作为构建工具，NX 以高效的增量项目构建而自豪。它将重建必要的内容，并且永远不会两次运行相同的计算，以减少项目的构建时间。它的表现令人印象深刻。
与 Bit 一样，Nx 插件也可以帮助您开发 反应 具有对工具和库的集成支持的应用程序，例如 是 , 柏 , ESLint ， 和更多。 Nx 还支持框架，如 Next.js ，并且支持 反应原生 .
3. 学习
学 现在由 NX 团队维护，但最初是由 BabelJS 的开发人员创建的。它被构建为一个相当简单的工具，用于管理具有多个包的存储库，因此您可以分别对每个包进行版本控制和发布。它为此目的提供了有用的自动化。
包/
标题/
源/
...
包.json
rollup.config.json
is.config.js
页脚/
源/
...
包.json
rollup.config.json
is.config.js
混音应用/
应用程序/
...
上市/
包.json
remix.config.js
包.json
您可以将所有包保持在同一个版本上，并且版本保存在 粘土.json 项目根目录下的文件。或者，在它们之间拆分版本控制。然后，您可以稍后从存储库中发布一个或所有包。
Lerna 确实努力帮助减少构建时间。 Lerna 不会运行之前执行的任务，而是从缓存中恢复文件。计算缓存可以分布到多台机器上，以进一步减少构建时间。
对于 React，Lerna 可能有点短。您想要开发多个应用程序和库、组件、体验，在它们之间共享代码并将它们组合在一起，并扩展此工作流程。由于 Lerna 是为解决“package=project”而构建的，并且由于它的一组特性，它仍然需要大量配置，并且在为组件定义开发任务、更新更改或处理依赖项时存在差距。
4.涡轮回购
涡轮回购 最近被 Vercel 收购。它为 JS 和 TS monorepos 提供了一个高性能的构建系统。因此，它符合利用智能和高效计算和缓存的增量构建的标准。
Turborepo 在某种程度上是 NX 和 Lerna 的混合体，它专注于软件包，但在工作空间中提供了与 NX 类似的工具，例如增量构建、并行执行、远程缓存和任务管道。
[ 
](https://github.com/vsavkin/large-monorepo)Benchmarking NX and Turborepo (source: in link)
这是 GitHub 上 nx 和 turborepo 的一个不错的基准测试项目：
[
large-monorepo,对Nx和Turborepo进行基准测试,下载large-monorepo的源码_GitHub_帮酷
记录：Repo 包含：5 个共享的可构建包/库，每个包含 250 个组件 构建了 5 个 Next.js 应用程序......
github.com
](https://github.com/vsavkin/large-monorepo)
5. 冲
匆忙 是一个 monorepo 设置工具，起源于微软，作为管理包含许多包的 repos 的工具，具有强大的增量和超高效的构建系统，具有增量构建和智能计算，但有时在开发体验、生态系统兼容性和在图表上管理代码库的整个概念 少量 .
git 克隆 https://github.com/microsoft/rushstack
cd rushstack
git 克隆 https://github.com/microsoft/rushstack
cd rushstack
_# 安装 NPM 包：_
_# （如果您没有配置 GitHub 电子邮件，请添加“--bypass-policy”选项。）_
紧急更新
_# 增量安装：_
紧急更新 _# <-- 瞬间！_
_# 强制重建所有项目：_
急于重建
_# 增量构建：_
急建 _# <-- 瞬间！_
_# 使用“--verbose”查看每个项目构建时的控制台日志。_
_# 项目在并行进程中构建，但它们的日志是经过整理的。_
急于重建——详细
spencer eliot 有一篇精彩的文章将 Rush 与 NX 进行了比较，所以我将省略这部分内容，您可以前往那里了解更多信息：
[
Rush vs Nx：TypeScript Monorepo 管理工具的比较elliott.dev
2020 年 11 月 11 日随着用于存储源代码的 monorepo 策略的日益普及，越来越多的…
elliott.dev
](https://elliott.dev/posts/rush-vs-nx)
这是一个不错的 实施指南 有一个 Rush+React monorepo 的真实例子，这里有一个 示例项目 在 GitHub 上。
⭐️ 奖励：Git 子模块（不要……）
So true
如果你用谷歌快速搜索 Git 子模块，结果将 不积极 .这是因为 git 子模块的一些主要缺点，例如被锁定到外部 repo 的特定版本，缺乏有效的合并管理，以及 Git 存储库本身并不真正知道它现在是一个多-模块存储库。
Git，在它的基础上，也不是为了处理组件之间的依赖关系和关系而构建的。因此，围绕代码共享的工作流程变得复杂，并且子模块是 努力交付 我们想要的工作流程。在 mercurial 中，子存储库被命名为“ 最后手段的特征 ”要避免。
所以，是的，除非一切都失败了，否则不要使用它。
学到更多
[
我们如何构建微前端
构建微前端以加速和扩展我们的 Web 开发过程。
博客.bitsrc.io
](/how-we-build-micro-front-ends-d3eeeac0acfc)
[
创建新 React 应用程序的 7 种最佳方法
做出正确的决定并明智地选择如何启动新的 React 应用程序。
博客.bitsrc.io
](/6-best-ways-to-create-a-new-react-application-57b17e5d331a)
[
如何创建可组合的 React 应用程序
在本指南中，您将学习如何使用 Bit 构建和部署成熟的可组合 React 应用程序。建立一个…
比特云
](https://bit.cloud/blog/how-to-create-a-composable-react-app-with-bit-l7ejpfhc)
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
