有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。前言 今天这篇文章主要来比较一下目前比较流行的 Monorepo 框架。
【常见的 Monorepo 框架大比较】本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。
Turborepo
![常见的 Monorepo 框架大比较](http://img.readke.com/220721/09113ab6-0.jpg)
文章图片
首先是 Turborepo,上次的文章中只提到 Turborepo 的使用方式,今天这篇文章就来提提 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 来降低複杂度。
Nx
![常见的 Monorepo 框架大比较](http://img.readke.com/220721/0911396219-1.jpg)
文章图片
Nx 是一套相当好用的 Monorepo 框架,本身内置相当多好用的工具提供给开发者使用,此框架也是最多人拿来跟 Turborepo 比较。
相较于 Turborepo ,Nx 是从 2018 年问世,所以整体来说一定有更好的优化以及更好的开发体验,接下来笔者会一一介绍几个笔者在使用此框架时有用到的好用工具,读者如果后续有想要玩玩看 Nx 的话不妨也可以试试看这些功能。
- Local computation caching:本地端读取,缓存已经 build 过的内容,让后续在 build 的过程中不必再花时间 build 先前的文件,藉此加速项目整体 build 的时间。
- Project graph visualization:互动式图形化界面,让开发者可以快速知道项目间彼此的相依性,也可以藉此检查是否有 repo 引用了错误的 repo。
- task coordination:任务协调,可以同步进行项目 repo build 的 task 藉此达加速整个 build 的流程,详细的内容会在下方介绍 Lerna 的时候一併介绍给读者
![常见的 Monorepo 框架大比较](http://img.readke.com/220721/091139B05-2.gif)
文章图片
除了终端机的显示差别外,在 build 的时间上拜 local caching 所赐,Nx 也是赢过 Turborepo 的。
![常见的 Monorepo 框架大比较](http://img.readke.com/220721/09113943C-3.gif)
文章图片
Lerna
![常见的 Monorepo 框架大比较](http://img.readke.com/220721/09113912F-4.jpg)
文章图片
Lerna 这套 Monorepo 框架相较于上面提到的 Nx 以及 Turborepo 来说可以说是最老牌的,是从 2015 年开始问世的,而 Lerna 包含的东西非常多可以说是奠定了一套最完整的 Monorepo 架构的基础。
Lerna 提供了相当多的
command
可以使用,其中最重要的两个 command 分别是 lerna bootstrap
以及 lerna publish
,想了解更多 command 的读者可以参考官网,笔者只会单纯介绍这两个好用的 command。- lerna bootstrap:用来连结项目内的 dependencies。
- lerna publish:用来发布 updated package。
然而 Turborepo 以及 Nx 都有完美做到 task coordination 的效果,下图为 task coordination 的简单事例,相信读者应该可以马上感受出来整体在 build 的过程中的时间差。
![常见的 Monorepo 框架大比较](http://img.readke.com/220721/0911393W8-5.jpg)
文章图片
不过 Lerna 在最新的 v5 版本中加入了不少元素,最大的特点莫过于可以跟 Nx 结合并且使用一些 Nx 才有的功能,例如:Local computation caching、Project graph visualization 甚至是 task coordination 等等,让 Lerna 不会被时代的推进而淘汰。
使用的方式也很简单,只要将根目录下的 lerna.json 中加上
useNx: true
这个条件即可使用 Nx 的功能,当然读者也要记得安装 Nx 才能真的使用这些功能喔。![常见的 Monorepo 框架大比较](http://img.readke.com/220721/0911393306-6.jpg)
文章图片
总结 这次文章介绍了在 React 中比较主流的三大 Monerepo 框架,这三个框架彼此都有各自的优缺点,所以没有绝对的好用跟不好用,一切都可以取决于自己的喜好来做选择喔!
不过由于笔者自己本身是写 React 的,也用了不少 Vercel 团队的工具,例如 Next.js、swr 等,所以一开始笔者接触的 Monorepo 框架也是先从 Turborepo 开始,但用著用著后续也觉得 Nx 更好用一些所以就打算写一篇文章来比较各个常见的 Monorepo 框架了,希望能藉此帮助到跟我一样有选择障碍的读者XD
编辑中可能存在的bug没法实时知道,事后为了解决这些bug,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
作者:Andy Chen 译者:小智 来源:medium
原文:https://medium.com/tarbugs/%E...
交流
有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。
![常见的 Monorepo 框架大比较](http://img.readke.com/220721/0911393139-7.jpg)
文章图片
推荐阅读
- Vue动态绑定背景图片及三元运算操作
- 我想写一个 Vue3 组件库,我该怎么开始()
- 7个 Vue3 中的组件通信方式
- Vue3中实现路由跳转的过渡动画(一)
- Vue3中插槽的概念和用法
- 关于Vue3的defineProps用法
- elementUI Tree树形控件如何设置默认树节点
- vue2 生命周期详解
- element-uishow-overflow-tooltip 使用