React 中比较主流的三大 Monerepo 框架对比

本文主要来比较一下目前 React 中比较流行的 Monorepo 框架。

Turborepo

Truborepo 是一套相当轻量的且可以快速建立出 Monorepo 架构的框架，这套框架是由一位很有名气的工程师 Jared Palmer 开发，后续也是由鼎鼎大名的 vercel 团队进行维护。

虽然 Turborepo 是 2021 年才问世的算是相当新的一个框架，后续可能会有许多问题以及待优化项目需要处理，不过毕竟人家背后有 vercel 在帮忙，所以读者其实是可以放心使用的不用担心 XD

而 Turborepo 一共有以下几种特性：

• Faster, incremental builds：更快的 build 速度。
• Content-aware hashing：自动查看项目内所有文件进行 build，而不是利用 timestamp 的方式来决定哪些文件是需要 build 的。
• Cloud caching：可以分享 cloud build caching 来加速 CI/CD 的构建。
• Parallel execution：有效利用所有 CPU 核心的性能，不会浪费閒置 CPU 的性能。
• Task pipelines：定义 task 的关系，让 Turborepo 可以最佳化的决定这些 task 的 build 时机。
• Pruned subsets：藉由建立 subset 来加速 Platform as a Service(Paas) 的 deploy 效能。
• Convention-based config：利用 JSON file 来降低複杂度。

有了以上几点特性让 Turborepo 可以成为一套既容易上手又可以兼具项目性能的好用的 Monorepo 框架。

Nx

Nx 是一套相当好用的 Monorepo 框架，本身内置相当多好用的工具提供给开发者使用，此框架也是最多人拿来跟 Turborepo 比较。

相较于 Turborepo ，Nx 是从 2018 年问世，所以整体来说一定有更好的优化以及更好的开发体验，接下来笔者会一一介绍几个笔者在使用此框架时有用到的好用工具，读者如果后续有想要玩玩看 Nx 的话不妨也可以试试看这些功能。

• Local computation caching：本地端读取，缓存已经 build 过的内容，让后续在 build 的过程中不必再花时间 build 先前的文件，藉此加速项目整体 build 的时间。
• Project graph visualization：互动式图形化界面，让开发者可以快速知道项目间彼此的相依性，也可以藉此检查是否有 repo 引用了错误的 repo。

这件事在 Turborepo 中如果要达到必须要安装一个叫 Graphviz 的工具，且此工具只能生成图案无法产生互动式界面。

• task coordination：任务协调，可以同步进行项目 repo build 的 task 藉此达加速整个 build 的流程，详细的内容会在下方介绍 Lerna 的时候一併介绍给读者

除了以上这几点特性外，个人认为 Nx 还有一个特性做得比 Turborepo 好，在终端机的显示上 Nx 给人一种一目了然的感觉，可以知道有哪些文件正在 build 而且也有颜色上的区分。

除了终端机的显示差别外，在 build 的时间上拜 local caching 所赐，Nx 也是赢过 Turborepo 的。

Lerna

Lerna 这套 Monorepo 框架相较于上面提到的 Nx 以及 Turborepo 来说可以说是最老牌的，是从 2015 年开始问世的，而 Lerna 包含的东西非常多可以说是奠定了一套最完整的 Monorepo 架构的基础。

Lerna 提供了相当多的 command 可以使用，其中最重要的两个 command 分别是 lerna bootstrap 以及 lerna publish ，想了解更多 command 的读者可以参考官网，笔者只会单纯介绍这两个好用的 command。

• lerna bootstrap：用来连结项目内的 dependencies。
• lerna publish：用来发布 updated package。

还记得上面提到的 task coordination 吗？Lerna 其实没有比较优化的 task coordination 流程，必须要一个 task 完成后才能执行下一个 task，假如项目内的 repo 有相依性的问题，这时候整体的 build 时间就会拉得很长。

然而 Turborepo 以及 Nx 都有完美做到 task coordination 的效果，下图为 task coordination 的简单事例，相信大家应该可以马上感受出来整体在 build 的过程中的时间差。

不过 Lerna 在最新的 v5 版本中加入了不少元素，最大的特点莫过于可以跟 Nx 结合并且使用一些 Nx 才有的功能，例如：Local computation caching、Project graph visualization 甚至是 task coordination 等等，让 Lerna 不会被时代的推进而淘汰。

使用的方式也很简单，只要将根目录下的 lerna.json 中加上useNx: true 这个条件即可使用 Nx 的功能，当然大家也要记得安装 Nx 才能真的使用这些功能喔。

结语

以上就是本文介绍的 React 中比较主流的三大 Monerepo 框架，这三个框架彼此都有各自的优缺点，所以没有绝对的好用跟不好用，一切都可以取决于自己的喜好来做选择喔！

之前自己也过写 React 项目，也用了不少 Vercel 团队的工具，例如 Next.js、swr 等，所以一开始接触的 Monorepo 框架也是先从 Turborepo 开始，但是用着用着也觉得 Nx 更好用一些所以就打算写一篇文章来比较各个常见的 Monorepo 框架了，希望能通过这篇文章帮助到跟我一样有选择障碍的童鞋。