一、需求背景

公司目前有多个项目有相同的业务场景，且前端页面交互与业务逻辑是一致的。一开始由于只有一小部分功能会重复，因此是在每个系统前端中都写了同一套的前端功能。但是目前有大量的重复需求要在不同项目中使用，因此不得不考虑将这些相同业务逻辑的模块提取公用项目或者组件出来了，在此期间，也考虑了很多不同方案，最终基于我们公司目前的项目情况，择优选择了subtree这种方案。

二、方案选择

1、npm

将模块封装成npm包，并发布私服。在每个项目中，安装该npm包。

不选择的原因：需要配置私服，且由于业务模块更新迭代比较频繁，每次都需要更新npm包，且不知道何时需要更新，可能会导致业务模块没有及时更新，引发项目线上问题。

2、公用组件

将公用模块封装成公用组件，并同步到每个项目中。

不选择的原因：由于目前项目均各自独立，并没有依赖于某个父项目，如果选择公用组件这种方案，将会对目前所有项目进行一个较大项目结构改动，时间成本较大。

3、subtree

创建一个公用项目，使用git subtree将该项目作为子项目引入到主项目中。对于主项目来说，这个子项目只是作为一个子目录的方式存在，用户可直接修改该子项目，并做提交。在其他的主项目中，进行拉取，即可同步更新到该子项目，在主项目中进行使用。项目内部依赖外部独立项目的时候，是完全无感知的操作。

三、如何使用

1、在主项目中添加子项目

在git仓库中，创建新项目（child-project），使用以下git命令，将child-project添加到主项目（parent-project-1）中：

git subtree add --prefix=src/subtree/child-project xxx master --squash

• xxx：child-project项目的git仓库的HTTPS链接
• src/subtree/child-project：子项目正在主项目中的路径和文件名，根据项目实际情况进行自定义。
• --squash：不拉取历史信息，只生成一条commit信息
• master：子项目的分支名，一般add的时候，需要获取子项目的master分支。

添加完成后，我们就可以在主项目中对子项目进行功能需求的开发了，只需要把子项目当成主项目的一个子目录看待即可。

2、推送更新到子项目中

当我们完成需求开发后，需要将子项目的修改push到远程仓库中。由于主项目git push之后，是不会将子项目的更新内容同步push到子项目远程仓库中，因此需要我们使用以下命令进行手动推送。

git subtree push --prefix=src/subtree/child-project xxx master

3、在其他主项目进行子项目更新

在其他主项目添加child-project子项目后，如果某个主项目有对子项目进行了更新，我们需要在其他主项目中进行子项目代码的更新，才可将最新的代码更新到当前项目中。

git suntree pull --prefix=src/subtree/child-project xxx master

需要注意的是：需要在主项目中的本地修改commit之后，才可以进行子项目代码的更新，否则会报错，提示有代码更新需要先进行提交。

4、简化pull和push命令

如果用以上命令进行pull和push操作，我们需要每次都要正确输入--prefix参数内容和子项目git仓库的链接，因此我们需要自己定义npm指令，简化我们提交和代码拉取的命令。

在主项目根目录的package.json文件中进行npm命令的封装：

pull

"scripts": {
    "subtree:pull": "git subtree pull --prefix=src/subtree/child-project xxx"
}

push

"scripts": {
    "subtree:push": "git subtree push --prefix=src/subtree/child-project xxx"
}

使用

npm run subtree:pull -- master

npm run subtree:push -- master

• -- master：子项目的分支名

四、小结

• 关于subtree的相关内容就更新到这里了，小伙伴们如果有其他相关的补充或者问题可以在评论区讨论哦~
• 如果有更好对针对这种多项目共用一个模块的解决方案，也欢迎小伙伴们分享哦，大家一起学习，一起进步！