背景介绍

几天前，晓东船长微信问我，你们团队有没有monorepo的实践，我很遗憾的告诉他没有，但这在我心里播下了一颗探索的种子，刚好最近老总要搞内蒙古的新项目，我和另一个前端兄弟组成双枪敢死队进行保驾护航，于是我就开始探索，有没有一种可能，可以一个仓库管理多个项目，这里说的管理是指有条理有规范的管理，而不是说硬是把几个项目蹂躏到一起。

相关概念介绍

什么是monorepo？

在版本控制系统中，monorepo是一种软件开发策略，其中许多项目的代码存储在同一存储库中。这种软件工程实践至少可以追溯到2000年代初期，当时被称为“共享代码库”。一个相关的概念是整体，但是尽管整体将其子项目合并为一个大型项目，但整体仓库可能包含独立的项目。(翻译自维基百科)

什么是yarn？什么又是yarn wrokspace？

简单地说，Yarn Workspaces是Yarn提供的monorepo的依赖管理机制，从Yarn 1.0开始默认支持，用于在代码仓库的根目录下管理多个package的依赖

实践教程

具体的教程，我觉得官网已经写的很详细了，我没有必要复读一遍，所以我这边只介绍我这个项目相关的一些关键点的介绍。

我是这样子做架构的， 将项目一分为二，applications表示应用程序目录，里面包含了一些项目，比如企业端、资金端、平台端，以及小程序和h5等，而packages这一块的话，是我把applications中公共的部分抽离出来，做到多可复用。

基于yarn1.x的monorepo实践分享 - 图1

除此之外，项目还做了一些优化，比如

  • 配置了eslint + prettier 去规范团队的代码
  • 配置了husky和commitlint去规范团队的代码提交

项目的目录结构是这样子的

  • applications/ent: 企业端
  • applications/plat: 平台端
  • applications/fund: 资金端
  • applications/mina: 小程序/h5
  • packages/utils: 通用工具包
  • packages/componets: 通用组件包
  • packages/service: 通用服务包
  • packages/openapi: 通用 openapi 接口包
  • packages/constants: 通用常量包
  • packages/types: 通用类型包
  • packages/styles: 通用样式包
  • packages/hooks: 通用钩子包

基于yarn1.x的monorepo实践分享 - 图2

根目录下的package.json如下：

  1. {
  2.   "name": "",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "index.js",
  6.   "repository": "",
  7.   "author": "",
  8.   "license": "MIT",
  9.   "private": true,
  10.   "workspaces": [
  11.     "applications/*",
  12.     "packages/*"
  13.   ],
  14.   "scripts": {
  15.     "build": "yarn workspaces run build",
  16.     "clean": "yarn workspaces run clean",
  17.     "lint:fix": "yarn workspaces run lint:fix",
  18.     "prettier:fix": "yarn workspaces run prettier:fix",
  19.     "ent": "yarn workspace @sunyard-fin/ent",
  20.     "fund": "yarn workspace @sunyard-fin/fund",
  21.     "plat": "yarn workspace @sunyard-fin/plat",
  22.     "mina": "yarn workspace @sunyard-fin/mina",
  23.     "components": "yarn workspace @sunyard-fin/components",
  24.     "constants": "yarn workspace @sunyard-fin/constants",
  25.     "openapi": "yarn workspace @sunyard-fin/openapi",
  26.     "service": "yarn workspace @sunyard-fin/service",
  27.     "types": "yarn workspace @sunyard-fin/types",
  28.     "styles": "yarn workspace @sunyard-fin/styles",
  29.     "utils": "yarn workspace @sunyard-fin/utils"
  30.   },
  31.   "devDependencies": {
  32.     "@commitlint/cli": "^17.0.3",
  33.     "@commitlint/config-conventional": "^17.0.3",
  34.     "eslint": "^8.15.0",
  35.     "husky": "^8.0.1",
  36.     "lint-staged": "^13.0.3",
  37.     "prettier": "^2.7.1",
  38.     "typescript": "^4.7.4",
  39.     "@antfu/eslint-config": "^0.23.0",
  40.     "eslint-plugin-prettier": "4.0.0",
  41.     "eslint-config-prettier": "8.5.0"
  42.   },
  43.   "husky": {
  44.     "hooks": {
  45.       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
  46.     }
  47.   },
  48.   "lint-staged": {
  49.     "*.{md,json}": [
  50.       "prettier --write"
  51.     ],
  52.     "*.{css,js,jsx,vue,ts,tsx}": [
  53.       "prettier --write",
  54.       "eslint --fix  --cache"
  55.     ]
  56.   }
  57. }

这里需要注意的好几点是

  • 在根目录下要陪着对应包目录
  1.  "workspaces": [
  2.     "applications/*",
  3.     "packages/*"
  4.   ],
  • "build": "yarn workspaces run build", 这句话的意思就是构建打包所有的项目包
  • "ent": "yarn workspace @sunyard-fin/ent",

配置了楼上这句话以后，就相当于一个快捷方式，你不用进入子项目去运行，直接在根目录执行yarn ent dev 就可以进入开发环境了，就相当于进入子目录执行yarn dev, 然后可能你也看到了，这里的项目名不一定要跟目录名字一样的，使用@xxx是不是感觉更有仪式感一点呢。

  • 比如说我要给企业端添加utils包的话，可以执行yarn workspace @sunyard-fin/ent add @sunyard-fin/utils -D, 当然你也可以直接写到对应项目的package.json里面
  • 给所有项目都安装一个包，执行yarn add -D -W typescript,这就会给所有项目安装typescript包

其他的就按照正常使用yarn来。

总结

monorepo适合运用在大型项目中，结合yarn1.x使用的好处是不用每个项目都安装一遍依赖，这极大的减少项目的体积，然后管理代码也更有条理了，各个模块清晰了很多，也做到了高可复用。

FAQ

  • 为什么选择yarn1.x，不是有yarn2.x吗？

其实最开始的选型上，也考虑过用pnpm、yarn2、lerna等等，时间紧任务重，我没有太多的精力去一个一个调研，粗略看了下yarn1.x针对于我们目前这个项目够用了，而且引入也没有啥弊端目前看来，然后也是天然集成的，就不用再额外地增加学习成本，yarn2的话也很好，只不过是我设置yarn set version berry好像我不科学自强就成功不了，考虑到这是一个团队（额，虽然也就我和另一个兄弟哈哈哈），所以我还是比较拘谨没有采用2.x，嗯。

参考文献