一种基于monorepo的Web前端开源依赖二次开发方法技术

技术编号:38021294 阅读:7 留言:0更新日期:2023-06-30 10:48
本发明专利技术公开一种基于monorepo的Web前端开源依赖二次开发方法。本发明专利技术解决多仓库分别开发开源依赖于宿主项目联合调试流程繁琐、易出错问题,降低开发人员的心智负担;提供灵活的模块代码组织方式方便细粒度的开发调试模块代码;在满足业务快速迭代的同时保证依赖的独立性。立性。立性。

【技术实现步骤摘要】
一种基于monorepo的Web前端开源依赖二次开发方法


[0001]本专利技术涉及Web前端程序开发时项目的管理方法,尤其涉及一种基于monorepo的Web前端开源依赖二次开发方法。

技术介绍

[0002]在以模块化构建工具(webpack、rollup等)组织的Web前端代码仓库中,一般以npm/yarn作为依赖管理工具安装、升级仓库中需要的依赖。在需要开源依赖不满足业务需求需要进行二次开发时常见的实现有以下两种:
[0003]1.源码复制:较为原始的方式,构建工具适配源码的构建上下文后在复制源码至宿主项目的源码目录,直接集成至其整个软件生命周期流程,如附图1。
[0004]缺点:无法独立开发开源依赖,增加了额外的构建成本;无法做到技术无关,依赖与宿主项目使用不同的界面仓库、语言版本不一致的情况构建配置需要修改较多的条件分支分别构建;宿主项目的构建工具需要兼容不同项目的配置容易出现配置冲突,代码冗余等边界问题。
[0005]2.多仓库(poly

repo):拉取开源依赖指定版本由此为基点单独创建仓库进行开发,完成开发后需要重新构建、发布到注册中心(registry),并由宿主项目下载,如附图2。
[0006]缺点:增加了额外的构建、调试、测试流程,流程较为繁琐;依赖与宿主仓库联合调试一般使用npm link指令手动指定依赖的磁盘路径,调试后需要npm unlink解锁恢复引用,流程繁琐易出错。
[0007]因此,现有技术存在缺陷,需要改进。

技术实现思路

[0008]本专利技术要解决的技术问题是:提供一种基于monorepo的Web前端开源依赖二次开发方法,在二次开发开源依赖的项目中满足方便的联合调试的同时减少开发人员认知负担,降低开发成本。
[0009]本专利技术的技术方案如下:提供一种基于monorepo的Web前端开源依赖二次开发方法,包括以下步骤。
[0010]S1:创建以宿主项目为主的monorepo,指定/packages目录为工作区,宿主项目的路径为/packages/app1;所述monorepo为一个单一的仓库包含多个不同的项目,且项目间具有明确的关系定义。
[0011]S2:将开源依赖指定版本fork至工作区依赖目录/packages/lib1,修改版本为version1。
[0012]S3:在宿主项目package.json文件中声明@仓库命名空间/lib1@version1作为其依赖。
[0013]S4:在根目录执行依赖安装命令,此时由于宿主依赖的版本与工作区依赖模块的版本一致,根路径依赖目录中的@项目命名空间/lib1@version1模块将会是软链,指向工作
区/packages/lib1。
[0014]S5:执行开发/构建命令。
[0015]在此种目录结构下,典型的依赖为UI控件的开发调试步骤如下。
[0016]A1:创建新的工作区包目录/packages/debug。
[0017]A2:使用项目样板初始化工作以该目录创建初始化项目。
[0018]A3:修改/packages/lib的版本为version2。
[0019]A4:以该项目package.json文件中声明@仓库命名空间/lib1@version2与/packages/app1作为其依赖。
[0020]A5:执行安装命令。
[0021]A6:在该项目入口文件引用app1项目的全局导出的代码。比如公用样式、全局变量的代码等。
[0022]A7:在该项目入口文件引用依赖项目的lib1项目需要开发调试的组件。
[0023]A8:修改/packages/lib1目录下的源码。
[0024]A9:在debug项目目录下执行开发命令。
[0025]A10:完成特性开发后指定app1的依赖版本为@仓库命名空间/lib1@version2,提交发布。
[0026]该场景能以较低成本的开发资源使用app1项目的环境上下文调试开源依赖,且能独立开发不影响主项目app1的使用lib1@version1版本进行迭代。
[0027]在此种目录结构下,二次开发依赖与宿主项目技术框架不一致的开发调试步骤如下。
[0028]B1:修改/packages/lib1的package.json模块入口由src改为dist。
[0029]B2:在lib项目执行开发命令,输出目录为dist。
[0030]B3:在app1项目执行开发命令。
[0031]该场景能以较方便的流程步骤实现技术无关的联合调试。
[0032]在指定工作区后,可同时管理多个项目依赖,以及处理项目间依赖关系。
[0033]在指定工作区后,相同的依赖会被提升至项目根路径的node_modules目录进行管理。
[0034]采用上述方案,本专利技术提供一种基于monorepo的Web前端开源依赖二次开发方法,解决多仓库分别开发开源依赖于宿主项目联合调试流程繁琐、易出错问题,降低开发人员的心智负担;提供灵活的模块代码组织方式方便细粒度的开发调试模块代码;在满足业务快速迭代的同时保证依赖的独立性。
附图说明
[0035]图1为现有技术中源码复制的方式的流程图;
[0036]图2为现有技术中多仓库的方式的流程图;
[0037]图3为本专利技术的一实施例的流程图。
具体实施方式
[0038]以下结合附图和具体实施例,对本专利技术进行详细说明。
[0039]请参阅图3,本专利技术提供一种基于monorepo的Web前端开源依赖二次开发方法,包括以下步骤。
[0040]S1:创建以宿主项目为主的monorepo,指定/packages目录为工作区,宿主项目的路径为/packages/app1;所述monorepo为一个单一的仓库包含多个不同的项目,且项目间具有明确的关系定义。
[0041]S2:将开源依赖指定版本fork至工作区依赖目录/packages/lib1,修改版本为version1。
[0042]S3:在宿主项目package.json文件中声明@仓库命名空间/lib1@version1作为其依赖。
[0043]S4:在根目录执行依赖安装命令,此时由于宿主依赖的版本与工作区依赖模块的版本一致,根路径依赖目录中的@项目命名空间/lib1@version1模块将会是软链,指向工作区/packages/lib1。
[0044]S5:执行开发/构建命令。
[0045]名词定义:
[0046]yarn:Web前端领域常用的一种管理工具。
[0047]workspaces:yarn提供的特性,在声明指定目录为工作区后可同时管理多个项目依赖,以及处理项目间依赖关系,当指定工作区后,相同的依赖会被提升至项目根路径的node_modules目录进行管理。
[00本文档来自技高网
...

【技术保护点】

【技术特征摘要】
1.一种基于monorepo的Web前端开源依赖二次开发方法,其特征在于,包括以下步骤:S1:创建以宿主项目为主的monorepo,指定/packages目录为工作区,宿主项目的路径为/packages/app1;所述monorepo为一个单一的仓库包含多个不同的项目,且项目间具有明确的关系定义;S2:将开源依赖指定版本fork至工作区依赖目录/packages/lib1,修改版本为version1;S3:在宿主项目package.json文件中声明@仓库命名空间/lib1@version1作为其依赖;S4:在根目录执行依赖安装命令,此时由于宿主依赖的版本与工作区依赖模块的版本一致,根路径依赖目录中的@项目命名空间/lib1@version1模块将会是软链,指向工作区/packages/lib1;S5:执行开发/构建命令。2.根据权利要求1所述的一种基于monorepo的Web前端开源依赖二次开发方法,其特征在于,依赖为UI控件的开发调试步骤如下:A1:创建新的工作区包目录/packages/debug;A2:使用项目样板初始化工作以该目录创建初始化项目;A3:修改/packages/lib的版本为version2;A4:以该项目package.json文件中声明@仓库命名空间/lib1@version2与/packages/app1作为其依赖;...

【专利技术属性】
技术研发人员:王曦超邹琼周双全
申请(专利权)人:深圳市瑞云科技股份有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1