Monorepo:让你的项目脱胎换骨,既能代码复用,又能独立部署!
本文由体验技术团队 Kagol 原创。
你的项目是不是正在不断膨胀,构建速度越来越慢,包体积越来越大,性能越来越慢了?
想拆分到不同的仓库中分开维护,又担心代码不方便复用?
你可能需要将项目改造成 Monorepo 啦!
我将带大家把一个现有项目改造成 Monorepo 方式,便于扩展和多项目复用。
如果你也有类似的需求,可以点赞、收藏下本文,关键时刻也许能帮上忙。
1 为什么需要做 Monorepo 改造
使用 monorepo 方式组织代码的前提是:
你有多个项目,并且需要在多个项目中复用组件和逻辑。
如果每个项目都是完全独立的,没有什么共用的代码(几乎不太可能),那也许你就不需要用 monorepo 啦。
1.1 Monorepo 的好处
使用 Monorepo 方式组织项目代码,至少有以下好处:
便于代码复用
:多个仓库都会用到的组件、工具函数、类型声明、样式等,可以放到 common 子包中,需要的仓库直接 npm install 这个子包就行,就跟 npm install 一个 npm 包一样容易。独立构建和部署
:每个子包都是一个独立的项目,有自己的 package.json 文件,独立安装依赖、独立端口和本地启动、独立测试、独立构建和部署,互不影响。降低切换成本
:由于只有单一仓库,clone 代码、切换分支、安装依赖比较方便,不用在不同文件夹之间切换。节约磁盘空间
:pnpm 天然具备 monorepo 能力,支持全局依赖管理,所有子包之间共享依赖,节约磁盘空间。方便提交PR
:由于是单仓库,增加新组件或给组件增加新特性,只需要提交一个 MR、编写一次 MR 描述、关联一次需求/缺陷单。方便代码检视
:一个完整的特性只需要统一在一个 MR 中检视,不用在多个仓库/多个 MR 之间切换。灵活便于扩展
:后续增加新的工程只需要在 packages 下增加一个子包,不需要申请新的代码仓库,也降低后续仓库维护成本,比如:配置保护分支 / GitHub Actions / 仓库标签等。
1.2 如果不用 Monorepo 会怎么样?
方式一: 把所有项目放到一个仓库里,创建很多文件夹,分别存放不同的项目,通过路由进行项目隔离。
这样做的好处是所有代码都在一起,代码复用方便,直接 ../
就行;而且不用创建和维护仓库,不用配置一堆流水线。
坏处也显而易见,就是项目会不断膨胀,本地启动调试会越来越慢、构建打包越来越慢,包体积越来越大,项目越来越卡,最后用户受不了纷纷弃坑。
方式二: 将项目拆分到不同的代码仓库进行维护。
好处是项目之间相互独立,不容易耦合,维护起来方便。
坏处就是增加了仓库维护成本、流水线创建成本,并且不方便项目之间复用代码。
不管是以上哪种方式,后续项目的演进都是麻烦不断,要么代码量膨胀、性能下降,要么重复劳动、一堆重复代码。
Monorepo 可以你帮助减少麻烦,快乐工作!
我们一起来看看具体怎么改造吧!
2 现有工程改造成 Monorepo 的步骤
假如我们已经有了一个 Vite + Vue3 工程,可以通过 npm run dev 本地启动,npm run build 进行构建。
基本步骤:
增加 packages 目录用于存放子包,增加 portal 子包
把现有工程的 src / public / package.json / vite.config.ts / tsconfig.xx.json / index.html / README.md 等项目启动和构建相关的目录和文件全部剪切到 packages/portal 目录中
增加 pnpm-workspace.yaml 文件配置多包路径
根目录增加 package.json 文件
执行 pnpm i 安装依赖,执行 pnpm -F portal dev 本地启动
将本地启动命令放到根目录的 packages.json scripts 中,方便启动
2.1 创建子包
第一步就是在根目录创建 packages 目录,增加项目子包,比如项目叫:portal
2.2 现有项目文件放进子包里
把现有工程的 src / public / package.json / vite.config.ts / tsconfig.xx.json / index.html / README.md 等项目启动和构建相关的目录和文件全部剪切到 packages/portal 目录中
2.3 配置 pnpm-workspace.yaml
根目录创建 pnpm-workspace.yaml
文件。
2.4 配置 package.json
项目原来的 package.json 属于子包,需要放到 portal 子包中。
项目根目录需要创建一个新的 package.json 文件。
2.5 改造前后目录结构对比
2.6 验证本地启动和构建命令
执行 pnpm i 安装依赖
执行 pnpm -F portal dev 本地启动
执行 pnpm -F portal build 项目构建
如果以上命令都正常,说明本次 Monorepo 改造成功!
2.7 增加便捷命令
将本地启动命令放到根目录的 packages.json scripts 中,方便启动。
后续启动项目:pnpm dev
构建项目:pnpm build
3 增加一个新项目 admin
在 packages 目录下执行 npm create vite admin,选择 React 框架。
执行 pnpm i 安装依赖
执行 pnpm -F admin dev 本地启动 admin 新项目
执行 pnpm -F admin build 构建 admin 新项目
两个项目同时启动了。
实现了 portal / admin 两个项目分开启动
、分开构建
、分开管理依赖
、分开测试
,互不影响,而且 portal 是 Vue 技术栈,admin 是 React 技术栈。
可以在根目录的 package.json scripts 增加对应的便捷命令。
改造后的 Monorepo 项目目录结构,看起来和原来差异不大,就是包了一层 packages,其实整个项目已经脱胎换骨,变成了一个更加让人“省心”的项目,项目之间的代码复用更加方便,后续维护和扩展也是非常轻松。
如果有些逻辑 portal / admin 都用到了,我们可以新加一个子包:common
然后在 portal / admin 中引入 common。
安装之后直接 import 进行使用即可。
4 总结
本文主要给大家分析了 Monorepo 方式组织项目代码的好处,以及不使用 Monorepo 可能带来的麻烦;
然后以一个 Vite + Vue3 项目为例,手把手带大家一起将它改造成 Monorepo 项目;
在此基础上,如何扩展一个新项目,并且新项目技术栈用的是 React,却可以和原来的 Vue 项目共同代码逻辑。
别犹豫了,动手实践起来吧!
最近我们新开源了一个基于 Quill 2.0 的富文本编辑器:Fluent Editor。
Fluent Editor:一个基于 Quill 2.0 的富文本编辑器,功能强大、开箱即用!
如果你正在寻找一款功能强大、开箱即用、易于扩展的开源富文本,不妨尝试下!
源码:https://github.com/opentiny/fluent-editor/ (欢迎 Star ⭐)
Kagol 个人博客:https://kagol.github.io/blogs
关于 OpenTiny
GitHub:https://github.com/opentiny/tiny-vue (欢迎 Star ⭐)
官网:https://opentiny.design/tiny-vue
B 站:https://space.bilibili.com/15284299
小助手微信:opentiny-official
公众号:OpenTiny
评论