你有多个前端项目,他们目录结构很像?有公共组件函数?该怎么复用?
背景
我独立开发了《联机桌游合集》,是个网页,可以很方便的跟朋友联机玩斗地主、五子棋、象棋等游戏。这些游戏是不同的前端项目,而这些项目的目录结构可以说是一模一样,还有很多公共组件和函数,我是如何管理的呢?是如何做方案选型的呢?
之前已经介绍过类似的话题:
- 《5种前端代码共享方案:npm包、git submodules、脚手架模板生成、复制、UMD或模块联邦》
- 《Git Submodules 介绍(通俗易懂,总结了工作完全够用的 submodule 命令)》
今天我们来聊一下,如何具体实践。
方案
- 目录结构很像,有几乎一样的
eslint
配置、一模一样的初始依赖package.json
。这些是项目根目录的相似性。但只是新建项目时一模一样,随着不同项目迭代开发,不同项目可能会新安装各自的依赖,造成差异。所以我们使用「脚手架模版生成初始项目」。 - 有公共的组件和函数。团队开发可以使用npm包维护,个人开发可以使用submodules维护。二者都具备版本管理、回退功能。本文选择「submodules」方案。
脚手架模板
- 首先,我们需要准备一个项目模板,可以用一个Git仓库存放代码,配置好各种代码规范,项目框架。在这个模板中,可能需要配置一些通用变量,例如
PROJECT_NAME
、PROJECT_DESCRIPTION
、PROJECT_KEY
等等。可以带上特殊标记,例如用{{}}包住,方便生成项目时,自动替换为项目的真实信息。 - 随后,我们需要开发基于模板生成项目的脚本,最好是没有任何依赖的linux shell脚本或windows bat脚本,也可以用js写脚本打包npm,方便大家通过
npx
调用执行。当然如果你只给自己用,也可使用nodejs文件做脚本或者python文件脚本,用你最擅长的脚本即可。脚本需要做什么事情呢?读取参数,获取新项目的项目名、描述,新建文件夹,拉取模板的代码,替换文件中所有的项目名称和描述变量,然后删掉模板的git目录,并用git init新初始化一个项目目录,提交第一个commit。
例如这个shell脚本,读取2个参数:1是项目的英文名,1是项目的英文名,1是项目的英文名,2是项目的中文名。这两个参数将会替换模板文件中所有的@GAME_KEY和@GAME_NAME,(当然跳过了图片文件qrcode.jpg),这是通过find
和sed
命令实现的。
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.json
、eslint
配置都是放在项目目录中的,所以单独的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个专栏里分享:《教你做小游戏》、《极致用户体验》。
转载自:https://juejin.cn/post/7156624721247731726