专栏首页云前端微前端工具箱:用subtree解决多模块复用问题

微前端工具箱:用subtree解决多模块复用问题

在日常开发工作中,可能会面临这样一种需求:项目 A 中,存在一个或多个有价值的功能模块,这里的所谓模块指有一个或几个页面组成的功能模组;其他项目,如项目 B,也想借助这些模块给自己赋能,且基本要求如:

  • 要使用项目 B 自己的导航菜单
  • 要重新定义路由并将各个模块分散到不同页面下
  • 接口请求要统一加特殊标识参数
  • 项目 B 要根据额外的环境变量对各模块中的功能做限制
  • 项目 B 希望以自己的上线节奏更新模块

为了理解方便,约定文档中可能通用的几个称呼:

  • 主项目 - 项目 A
  • 新项目 - 项目 B 等
  • 子模块 - 从项目 A 里划分出的几个模块

【方案对比】

经过调研,常用且纯前端的项目模块化改造方案如下:

成本 \ 方案

iframe

微前端

npm包

Git子模块

首次改造主项目

3

3

5

5

首次改造新项目

1

3

2

2

维护子模块

2

3

3

2

更新子模块

1

5

3

1

同步子模块

1

1

2

1

总开发成本

8

16

15

11

综合到考虑各业务项目体量、具体产品需求,和由改造带来的长期用户体验等,我们可能会在工具箱中选择Git子模块方案进行。

【git subtree 介绍】

subtree 是 git submodule 技术的主要替代技术,避免了后者的一些麻烦。

具体介绍这里不做赘述,可以直接参考文末的资料,如 《submodule vs. subtree 对比》[1]

简而言之:

  • 为每个子模块创建一个独立的 git 仓库
  • 子模块的 git 仓库中的文件可以被当成一个普通的子目录添加到主项目/新项目中
  • 过程中只拉取文件,不会产生额外的 git 隐藏文件等
  • 子模块中的改变会被正常提交到所在项目的历史中
  • 在主项目/新项目层面也可完成子模块的 git 推送/拉取操作,这也是推荐的做法

分别在主项目/新项目中执行的 git 命令:

  • 添加 remote 以简化后续命令:
git remote add -f <子模块别名> git@coding.foo.com:<子模块的...`.git`>

后面以 子模块别名report 为例

  • 添加 subtree:
git subtree add --prefix=<相对路径> report <分支> --squash
  • 拉取 subtree:
git subtree pull --prefix=<相对路径> report <分支> --squash
  • 推送 subtree:
git subtree push --prefix=<相对路径> report <分支>
  • 查看 subtree 的 id:
git ls-remote report
或
git ls-remote report | grep <sha-1>

【选择一种分支策略】

和 git 本身各种流派的 workflow 一样,subtree 并没有规定特定的工作流程;这里尝试总结两种:

⇲ 单向模式:被动小分支

  • 涉及子模块中功能升级、优化、改进的内容,都在主项目中
  • 日常的以上改动都 push 到子模块的 master
  • 子模块仓库中维护某个独立分支,如用于项目 B 的 feature-projB
  • 子模块 master 有更新时手动 merge 到 feature-projB
  • 新项目只 pull 最新的 feature-projB

优点:

  1. 新项目可以随意修改特定的子模块分支
  2. 合并冲突可以在子模块中按普通方式解决
  3. 子模块代码中无需判断所在项目的环境

缺点:

  1. 如果改动需要反向同步到 master,可能需要额外的重复修改或 cherry-pick

♺ 双向模式:共建master

  • 主项目和新项目各自维护涉及子模块的相关功能
  • 新项目中的改动也可以 push 到子模块的 master
  • 新项目涉及子模块的改动应保证不污染主项目等其他项目

优点:

  1. 涉及子模块中功能升级、优化、改进的内容,可以由各个业务项目共同贡献
  2. 如果改动不复杂可以跳过再去子模块仓库下进行的各种操作

缺点:

  1. 可能需要改动 webpack 配置等以区分项目环境
  2. 代码中需要区分环境的片段需要重点关注

【注意问题】

  • 新项目和主项目结构、基础能力难免不一致,如 src/storesrc/common/store ,以及 http 等模块中方法的不同
    • 要竭尽所能地使子模块低耦合,保证多项目适配的基本可行性
    • 要在文档中(如子模块根目录的README)标明所有依赖点
  • merge 代码冲突
    • 双向模式下,如果本方没有更新,可以直接 rm -rf 掉子模块目录并重新 add

【参考文档】

[1]《submodule vs. subtree 对比》: https://einverne.github.io/post/2020/04/git-subtree-usage.html#sub-module-vs-sub-tree-%E5%AF%B9%E6%AF%94

  • https://betterprogramming.pub/git-subtree-usage-6aaba8b5d947
  • https://medium.com/@v/git-subtrees-a-tutorial-6ff568381844
  • https://medium.com/@porteneuve/mastering-git-subtrees-943d29a798ec
  • https://medium.com/codex/github-subtrees-fb93d229cdc0
  • https://segmentfault.com/a/1190000012002151
  • https://tech.youzan.com/git-subtree/
  • http://www.fwolf.com/blog/post/246
  • https://liuyufang.com/version-control/git/git-subtree
  • https://www.worldhello.net/gotgit/04-git-model/050-subtree-model.html
文章分享自微信公众号:
云前端

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!

作者:云前端
原始发表时间:2021-11-18
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 有赞美业微前端的落地总结

    想要回答这个问题直接给一个定义其实没那么难,但是没接触过的同学未必理解。所以需要先介绍一下背景,再解释会更容易明白。

    coder_koala
  • 【微前端】1174- 有赞美业微前端的落地总结

    想要回答这个问题直接给一个定义其实没那么难,但是没接触过的同学未必理解。所以需要先介绍一下背景,再解释会更容易明白。

    pingan8787
  • 前端架构--从入门到微前端

    本书围绕前端架构的实施,从基础的架构规范,到如何设计前端架构,再到采用微前端架构拆分复杂的前端应用。

    奋飛
  • 微前端在美团外卖的实践

    微前端是微服务理念在前端的应用。之前美美给大家介绍过微前端在美团HR系统和美团闪购的实践文章。

    前端劝退师
  • 微前端在解决什么问题?

    上一篇微前端到底是什么已经从概念定义及实现思路上探究了微前端是什么的问题,而要彻底理解微前端的话,还需要想清楚这些问题:

    ayqy贾杰
  • 微前端模块共享你真的懂了吗

    也就代表每个应用都有相同的npm包,本质上没有真正意义上的实现模块共享和复用,只是代码层次共享和复用了,应用打包构建时,还是会将依赖包一起打包

    树酱
  • 微前端到底是什么?

    为了解决庞大的一整块后端服务带来的变更与扩展方面的限制,出现了微服务架构(Microservices):

    ayqy贾杰
  • 面向未来与浏览器规范的前端DDD架构设计

    Hello 大家好,我是来自字节跳动的郑仁杰,目前是公司微前端开源项目 Magic(https://github.com/bytedance/magic-mic...

    ConardLi
  • 聊聊前端工程化的实践与未来

    2017年的前端发生了非常多的事情。快速的技术进步,似乎已经使前端工程师应接不暇,我们来一起看下去年发生了哪些事件:

    yuanyi928
  • 浅析 Git 子模块

    以前端项目为例,通常我们用 npm dependencies 来集成第三方库,或者将自己维护的多个项目中通用的组件抽取出来。

    江米小枣
  • 从场景倒推,在字节我们要什么样的微前端体系

    微前端已经不是一个新概念了,大家或多或少都听说过接触过,这里不再去做一堆定义,只是对目前业界做法的调研总结 / 概览,这篇文章面向的是还没有在业务中使用过微前端...

    ConardLi
  • 大前端?/前端开发职位的未来方向/

    对于许多新人来说,他们最开始接触前端这行,都是从前端开发工资高啊,好找工作啊,入门门槛低,这些方面开始了解的。当他们开始学习前端一段时间之后,许多人不可避免的开...

    web前端教室
  • 《前端开发职位的发展方向 -- 大前端》| 微课-文字版

    /1/ 大前端的说法,是如何出现的?范围是多“大”? 对于许多新人来说,他们最开始接触前端这行,都是从前端开发工资高啊,好找工作啊,入门门槛低,这些方面开始了...

    web前端教室
  • 精读《Webpack5 新特性 - 模块联邦》

    先说结论:Webpack5 模块联邦让 Webpack 达到了线上 Runtime 的效果,让代码直接在项目间利用 CDN 直接共享,不再需要本地安装 Npm ...

    黄子毅
  • 小程序第二版发布啦。

    MikuTools - 工具集合(https://tools.imiku.me/)

    小F
  • Webpack5的Module Federation,号称改变JavaScript架构的游戏规则,是什么来头?

    目前很多公司的业务都涉及到多个端的开发,有PC端/小程序/原生客户端等,而不同端都有对应的一个或几个独立的项目,而这些不同的项目之间都有一些可复用的业务逻辑,开...

    winty
  • 微前端架构初探以及我的前端技术盘点

    最近几年微前端一直是前端界的热门议题, 它类似于微服务架构, 主要面向于浏览器端,能将一个复杂而庞大的单体应用拆分为多个功能模块清晰且独立的子应用,且共同服于务...

    徐小夕
  • 从微组件到代码共享

    随着前端应用越来越复杂,越来越庞大。前有巨石应用像滚雪球一般不断的叠高,后有中后台应用随着历史长河不断地积累负债,或者急需得到改善。微前端的工程方案在前端er心...

    用户6835371
  • web前后端架构演变以及对产品的影响

    通过了解整个技术架构和调用链,可以帮助产品理清产品架构,了解不同层的开发内容、了解公共可复用的模块有哪些。

    产品的技术小课

扫码关注腾讯云开发者

领取腾讯云代金券