背景

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

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

• 《5种前端代码共享方案：npm包、git submodules、脚手架模板生成、复制、UMD或模块联邦》
• 《Git Submodules 介绍（通俗易懂，总结了工作完全够用的 submodule 命令）》

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

方案

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

脚手架模板

1. 首先，我们需要准备一个项目模板，可以用一个Git仓库存放代码，配置好各种代码规范，项目框架。在这个模板中，可能需要配置一些通用变量，例如PROJECT_NAME、PROJECT_DESCRIPTION、PROJECT_KEY等等。可以带上特殊标记，例如用{{}}包住，方便生成项目时，自动替换为项目的真实信息。
2. 随后，我们需要开发基于模板生成项目的脚本，最好是没有任何依赖的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个专栏里分享：《教你做小游戏》、《极致用户体验》。