前端工程Monorepo项目管理方式

目录
  • 什么是 Monorepo?
  • MultiRepo 之痛
    • 1.代码复用
    • 2.版本管理
    • 3.项目基建
  • Monorepo 的收益
  • Monorepo 的落地
  • 总结

随着前端工程日益复杂,某些业务或者工具库通常涉及到很多个仓库,那么时间一长,多个仓库开发弊端日益显露,由此出现了一种新的项目管理方式——Monorepo。本文主要以 Monorepo 的概念MultiRepo的弊端Monorepo 的收益以及Monorepo 的落地这几个角度来认识和学习一下 Monorepo,文末会有思考题,欢迎大家来踊跃讨论。

什么是 Monorepo?

Monorepo 其实不是一个新的概念,在软件工程领域,它已经有着十多年的历史了。概念上很好理解,就是把多个项目放在一个仓库里面,相对立的是传统的 MultiRepo 模式,即每个项目对应一个单独的仓库来分散管理。

现代的前端工程已经越来越离不开 Monorepo 了,无论是业务代码还是工具库,越来越多的项目已经采用 Monorepo 的方式来进行开发。Google 宁愿把所有的代码都放在一个 Monorepo 工程下面,Vue 3、Yarn、Npm7 等等知名开源项目的源码也是采用 Monorepo 的方式来进行管理的。

一般 Monorepo 的目录如下所示,在 packages 存放多个子项目,并且每个子项目都有自己的package.json:

├── packages
|   ├── pkg1
|   |   ├── package.json
|   ├── pkg2
|   |   ├── package.json
├── package.json

那 Monorepo 究竟有什么魔力,让大家如此推崇,落地如此之广呢?

MultiRepo 之痛

要想知道 Monorepo 的优势,首先得弄清楚之前的开发方式有什么痛点。

之前传统的方式MultiRepo当中,每个项目都对应单独的一个代码仓库。我之前也是用这种方式开发的,是真真切切地感受到了这种方式带来的诸多弊端。现在就和大家一一分享一下。

1.代码复用

在维护多个项目的时候,有一些逻辑很有可能会被多次用到,比如一些基础的组件、工具函数,或者一些配置,你可能会想: 要不把代码直接 copy 过来,多省事儿!但有个问题是,如果这些代码出现 bug、或者需要做一些调整的时候,就得修改多份,维护成本越来越高。

那如何来解决这个问题呢?比较好的方式是将公共的逻辑代码抽取出来,作为一个 npm 包进行发布,一旦需要改动,只需要改动一份代码,然后 publish 就行了。

但这真的就完美解决了么?我举个例子,比如你引入了 1.1.0 版本的 A 包,某个工具函数出现问题了,你需要做这些事情:

  • 去修改一个工具函数的代码
  • 发布1.1.1版本的新包
  • 项目中安装新版本的 A。

可能只是改了一行代码,需要走这么多流程。然而开发阶段是很难保证不出 bug 的,如果有个按钮需要改个样式,又需要把上面的流程重新走一遍......停下来想想,这些重复的步骤真的是必须的吗?我们只是想复用一下代码,为什么每次修改代码都这么复杂?

上述的问题其实是 MultiRepo普遍存在的问题,因为不同的仓库工作区的割裂,导致复用代码的成本很高,开发调试的流程繁琐,甚至在基础库频繁改动的情况下让人感到很抓狂,体验很差。

2.版本管理

在 MultiRepo 的开发方式下,依赖包的版本管理有时候是一个特别玄学的问题。比如说刚开始一个工具包版本是 v1.0.0,有诸多项目都依赖于这个工具包,但在某个时刻,这个工具包发了一个 break change 版本,和原来版本的 API 完全不兼容。而事实上有些项目并没有升级这个依赖,导致一些莫名的报错。

当项目多了之后,很容易出现这种依赖更新不及时的情况。这又是一个痛点。

3.项目基建

由于在 MultiRepo 当中,各个项目的工作流是割裂的,因此每个项目需要单独配置开发环境、配置 CI 流程、配置部署发布流程等等,甚至每个项目都有自己单独的一套脚手架工具。

其实,很容易发现这些项目里的很多基建的逻辑都是重复的,如果是 10 个项目,就需要维护 10 份基建的流程,逻辑重复不说,各个项目间存在构建、部署和发布的规范不能统一的情况,这样维护起来就更加麻烦了。

Monorepo 的收益

说清楚 MultiRepo 的痛点之后,相信你也大概能理解为什么要诞生Monorepo这个技术了。现在就来细致地分析一下Monorepo到底给现代的前端工程带来了哪些收益。

首先是工作流的一致性,由于所有的项目放在一个仓库当中,复用起来非常方便,如果有依赖的代码变动,那么用到这个依赖的项目当中会立马感知到。并且所有的项目都是使用最新的代码,不会产生其它项目版本更新不及时的情况。

其次是项目基建成本的降低,所有项目复用一套标准的工具和规范,无需切换开发环境,如果有新的项目接入,也可以直接复用已有的基建流程,比如 CI 流程、构建和发布流程。这样只需要很少的人来维护所有项目的基建,维护成本也大大减低。

再者,团队协作也更加容易,一方面大家都在一个仓库开发,能够方便地共享和复用代码,方便检索项目源码,另一方面,git commit 的历史记录也支持以功能为单位进行提交,之前对于某个功能的提交,需要改好几个仓库,提交多个 commit,现在只需要提交一次,简化了 commit 记录,方便协作。

Monorepo 的落地

如果你还从来没接触过 Monorepo 的开发,到这可能你会疑惑了: 刚刚说了这么多 Monorepo 的好处,可是我还是不知道怎么用啊!是直接把所有的代码全部搬到一个仓库就可以了吗?

当然不是,在实际场景来落地 Monorepo,需要一套完整的工程体系来进行支撑,因为基于 Monorepo 的项目管理,绝不是仅仅代码放到一起就可以的,还需要考虑项目间依赖分析、依赖安装、构建流程、测试流程、CI 及发布流程等诸多工程环节,同时还要考虑项目规模到达一定程度后的性能问题,比如项目构建/测试时间过长需要进行增量构建/测试按需执行 CI等等,在实现全面工程化能力的同时,也需要兼顾到性能问题。

因此,要想从零开始定制一套完善的 Monorepo 的工程化工具,是一件难度很高的事情。不过社区已经提供了一些比较成熟的方案,我们可以拿来进行定制,或者对于一些上层的方案直接拿来使用。

其中比较底层的方案比如 lerna,封装了 Monorepo 中的依赖安装、脚本批量执行等等基本的功能,但没有一套构建、测试、部署的工具链,整体 Monorepo 功能比较弱,但要用到业务项目当中,往往需要基于它进行顶层能力的封装,提供全面工程能力的支撑。

当然也有一些集成的 Monorepo 方案,比如rushstack,提供从初始化、开发、构建、测试到部署的全流程能力,有一套比较完整的 Monorepo 基础设施,适合直接拿来进行业务项目的开发。不过由于这些顶层方案内部各种流程和工具链都已经非常完善了,如果要基于这些方案来定制,适配和维护的成本过高,基本是不可行的。

总结

总而言之,Monorepo 的开发模式就是将各自独立的项目,变成一个统一的工程整体,解决 MultiRepo 下出现的各种痛点,提升研发效率和工程质量。那最后我还有有一个问题,采用 Monorepo 解决了之前的痛点之后,产生了哪些新的问题呢?这些问题可以解决吗?更多关于Monorepo前端项目管理的资料请关注我们其它相关文章!

(0)

相关推荐

  • JS前端架构pnpm构建Monorepo方式管理demo

    目录 写在前面 什么是Monorepo?什么是pnpm? 搞一个Monorepo的demo玩玩

  • Yarn与Lerna管理monorepo使用详解

    目录 什么是 Yarn workspace 如何使用 Yarn workspace Lerna 安装依赖的方式 Yarn workspace 与 Lerna 结合 结合的方式 角色的分配 好处 使用 什么是 Yarn workspace Yarn workspace 是 Yarn 提供的 monorepo 下,管理依赖的机制.对代码仓库下,多个 package 的依赖,进行管理:将共同的依赖,做 hosting(提升).这样,可以防止 package 中的包重复安装. workspace 机制,

  • Android MonoRepo多仓和单仓的差别理论

    目录 前言 什么是Monorepo 什么是multi-repo multi-repo的问题 multi-repo的优点 MonoRepo的缺点 MonoRepo的优点 前言 今天不打算展开任何关于技术的探讨,只是想抛出一些观点,关于工程结构上的.可能有些人赞成也有些人反对,但是我觉得技术的世界还是需要一些讨论和探索的. 并没有指明那些就是最优解,可能都只是一些个人观点而已. 两种模式其实我都略微有点接触,当然文章也存粹是个人观点.我们先看下下面这幅图,其实就是一个原始工程结构,分仓结构,还有单仓

  • Vue3.0中的monorepo管理模式的实现

    前言 前段时间9月21日参加了在成都举办的第五届FEDAY, 印象比较深刻的是白鹭引擎首席架构师@王泽分享的<框架开发中的基础设施搭建>,提到了在下一代白鹭引擎中使用到monorepo模式,以用来管理多个模块,协调各个模块之间的依赖更新. 正好在国庆期间10月5日尤大公开了vue3.0已完成的源码,也是采用了monorepo管理模式,看来monorepo确实有其独到的优势,再加上以前在项目中遇到过相关的痛点,所以深入地了解了一下这种模式,本文将基于vue3.0讨论如何通过monorepo模式来

  • 前端工程Monorepo项目管理方式

    目录 什么是 Monorepo? MultiRepo 之痛 1.代码复用 2.版本管理 3.项目基建 Monorepo 的收益 Monorepo 的落地 总结 随着前端工程日益复杂,某些业务或者工具库通常涉及到很多个仓库,那么时间一长,多个仓库开发弊端日益显露,由此出现了一种新的项目管理方式——Monorepo.本文主要以 Monorepo 的概念.MultiRepo的弊端.Monorepo 的收益以及Monorepo 的落地这几个角度来认识和学习一下 Monorepo,文末会有思考题,欢迎大家

  • Eclipse中使用Maven创建Java Web工程的实现方式

    Eclipse中使用Maven创建Java Web工程的实现方式 1)在Eclipse项目栏中右键单击空白,New(或直接使用Ctrl+N快捷键) -- Other --Maven Project. 2)选择以webapp模板创建工程 3)填写Group Id . Artifact Id 等信息. groupId 定义了项目属于哪个组,举个例子,如果你的公司是mycom,有一个项目为myapp,那么groupId就应该是com.mycom.myapp. artifacted 定义了当前maven

  • 搭建element-ui的Vue前端工程操作实例

    一.安装npm镜像 (1)下载node.js, 配置node.js的环境变量 检测PATH环境变量是否配置了Node.js,点击开始=>运行=>输入"cmd" => 输入命令"path" 检查Node.js版本 在命令窗口输入:npm install -g cnpm –registry=https://registry.npm.taobao.org 二.安装全局vue-cli (1)npm install -g vue-cli 回车,验证是否安装成

  • springMvc 前端用json的方式向后台传递对象数组方法

    如下所示: JSP var vipFee= new Array; //遍历选中的对象 $("#feeList :checkbox:checked").each(function(i){ vipFee.push({"enterpriseSeq":$(this).attr("enterpriseSeq"),"merchNo":$(this).val(),"serviceFee":$(this).attr(&qu

  • WEB前端常见受攻击方式及解决办法总结

    一个网站建立以后,如果不注意安全方面的问题,很容易被人攻击,下面就讨论一下几种漏洞情况和防止攻击的办法. 一.SQL注入 所谓SQL注入,就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令.具体来说,它是利用现有应用程序,将(恶意)的SQL命令注入到后台数据库引擎执行的能力,它可以通过在Web表单中输入(恶意)SQL语句得到一个存在安全漏洞的网站上的数据库,而不是按照设计者意图去执行SQL语句.比如先前的很多影视网站泄露VIP会员密码

  • React.js前端导出Excel的方式

    目录 前言 实现方式 csv 与 Excel 的区别 react-csv xlsx cdn 方式 在 react 中使用 json 转 excel 结语 前言 前段时间,项目上有个需求需要将数据报表导出为 excel 的需求,这本来是后端的工作,前端只需要一个 a 标签,就可以下载文件,但不巧的是,正好遇到后端请假,而且项目比较着急,那么前端是否可以实现呢? 实现方式 经过一顿搜索后,发现有这么几个 npm 库 react-csv 根据给定的数据生成 CSV 文件,数据可以是二维数组.对象数组或

  • VBA工程加密PJ方式(两种)

    两种方式破解VBA加密代码 第一种: Sub VBAPassword1() '你要解保护的Excel文件路径 Filename = Application.GetOpenFilename("Excel文件(*.xls & *.xla & *.xlt),*.xls;*.xla;*.xlt", , "VBA破解") If Dir(Filename) = "" Then MsgBox "没找到相关文件,清重新设置."

  • vite前端构建Turborepo高性能monorepo方案

    目录 引言 什么是monorepo ? 引言 之前的一篇文章我选择了go做前端的cli工具链,现在出现了新的项目构建神器Turborepo用于Monorepo 方案. 什么是monorepo ? Monorepo是一种项目管理方式,在Monorepo之前,代码仓库管理方式是 MultiRepo,即每个项目都对应着一个单独的代码仓库每个项目进行分散管理 这就会导致许多弊端,例如可能每个项目的基建以及工具库都是差不多的,基础代码的重复复用问题等等... TurboRepo 是构建Javascript

  • Monorepo风格的组件工程搭建示例详解

    目录 Monorepo概念 Monorepo的优缺点 项目工程的搭建 技术选型 项目的大概结构 项目配置 Monerepo工程的起步 lint.prettier.eslint的接入 统一开发环境 packages子包搭建 ui-h5搭建 ui-taro搭建 icon搭建 hooks搭建 examples浏览器端演示包搭建 项目的构建与npm包发布 关于单元测试 最后 Monorepo概念 随着各种技术的发展和超级应用的出现,人们开始考虑怎么才能将所有的小应用都集成在一个大项目中,特别是在这些项目

  • 详解SpringBoot工程的三种搭建方式

    SpringBoot的主要目的是简化配置文件,通过少量配置即可运行Java程序,其强大的自动配置功能帮助开发者轻松实现配置装配,通过引入SpringBoot的 starter 就能实现想要的功能,不需要额外的配置. 目前SpringBoot工程有三种搭建方式: 通过Spring Initializr创建 通过IDEA创建工程 手动创建工程 官方生成工具 Spring团队提供一个非常方便的网页用于生成SpringBoot工程,打开浏览器进入Spring Initializr: 工程生成参数列表:

随机推荐