likes
comments
collection

你有多个前端项目,他们目录结构很像?有公共组件函数?该怎么复用?

作者站长头像
站长
· 阅读数 16

背景

我独立开发了《联机桌游合集》,是个网页,可以很方便的跟朋友联机玩斗地主、五子棋、象棋等游戏。这些游戏是不同的前端项目,而这些项目的目录结构可以说是一模一样,还有很多公共组件和函数,我是如何管理的呢?是如何做方案选型的呢?

之前已经介绍过类似的话题:

今天我们来聊一下,如何具体实践。

方案

  • 目录结构很像,有几乎一样的eslint配置、一模一样的初始依赖package.json。这些是项目根目录的相似性。但只是新建项目时一模一样,随着不同项目迭代开发,不同项目可能会新安装各自的依赖,造成差异。所以我们使用「脚手架模版生成初始项目」。
  • 有公共的组件和函数。团队开发可以使用npm包维护,个人开发可以使用submodules维护。二者都具备版本管理、回退功能。本文选择「submodules」方案。

脚手架模板

  1. 首先,我们需要准备一个项目模板,可以用一个Git仓库存放代码,配置好各种代码规范,项目框架。在这个模板中,可能需要配置一些通用变量,例如PROJECT_NAMEPROJECT_DESCRIPTIONPROJECT_KEY等等。可以带上特殊标记,例如用{{}}包住,方便生成项目时,自动替换为项目的真实信息。
  2. 随后,我们需要开发基于模板生成项目的脚本,最好是没有任何依赖的linux shell脚本或windows bat脚本,也可以用js写脚本打包npm,方便大家通过npx调用执行。当然如果你只给自己用,也可使用nodejs文件做脚本或者python文件脚本,用你最擅长的脚本即可。脚本需要做什么事情呢?读取参数,获取新项目的项目名、描述,新建文件夹,拉取模板的代码,替换文件中所有的项目名称和描述变量,然后删掉模板的git目录,并用git init新初始化一个项目目录,提交第一个commit。

例如这个shell脚本,读取2个参数:1是项目的英文名,1是项目的英文名,12是项目的中文名。这两个参数将会替换模板文件中所有的@GAME_KEY和@GAME_NAME,(当然跳过了图片文件qrcode.jpg),这是通过findsed命令实现的。

git clone git@xxx $1
cd $1
rm -rf .git
find . -type f ( -iname "*" ! -iname "qrcode.jpg" ) -exec sed -i '' s/@GAME_KEY/$1/g {} +
find . -type f ( -iname "*" ! -iname "qrcode.jpg" ) -exec sed -i '' s/@GAME_NAME/$2/g {} +
git init
git branch -M main
git submodule add git@xxx ./src/common-components # 自动添加submodule 公共组件仓库
npm i
mkdir src/utils
git add .
git commit -m "initialized by xxx"
git remote add origin xxx # 自动设置远端仓库地址
cd ..

submodules公共组件仓库

凡是需要被跨项目引用的组件,例如Button、Room等,我都会写到这个文件夹下。开发测试完毕,我就提交个版本。可以在其他项目中,拉取到公共组件的最新代码。非常方便。

当然,由于package.jsoneslint配置都是放在项目目录中的,所以单独的common-components仓库其实没有用,单独都跑不起来。它必须在宿主项目中,才能发挥价值。

如何在submodules仓库中引用宿主项目的配置文件?

常见的问题,如果在submodules中有个公共组件,是展示项目标题用的,那么如何获得项目标题呢?难道要通过props传入吗?

其实大可不必,只需要在宿主项目的模板中,创建一个config.ts文件,里面按照自己的规范定义好各种配置,在submodules直接引用即可。但是小心循环依赖噢,你可以定一个规范,比如:submodules能且只能引用config.ts的文件。

你有多个前端项目,他们目录结构很像?有公共组件函数?该怎么复用?

换句话说,虽然我在用submodules的模式共享代码,但你别把它想的多复杂。就把它当作项目的一个片段就好。

之前我尝试搞过存2份package.json、存2份tsconfig修改alias等等,都是期望组件库能够脱离项目单独运行。但发现都很别扭,还是上面的方法最顺畅。

写在最后

我是HullQin,公众号线下聚会游戏的作者(欢迎关注公众号,联系我,交个朋友),转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》,是个网页,可以很方便的跟朋友联机玩斗地主、五子棋象棋等游戏,不收费无广告。还独立开发了《合成大西瓜重制版》。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我噢~我有空了会分享做游戏的相关技术,会在这2个专栏里分享:《教你做小游戏》《极致用户体验》