前言

• 因为公司各个项目中好多业务部分是相似的，免不了到处cv代码，然后公共部分修改后，每个项目都得单独修改，很容易漏掉。
• 今年年初，正好公司的前端框架由vue2升级到vue3，乘此机会把之前的项目进行重构，相似的业务部分提取出来，统一管理。

实现方式

Git Submodule （子模块）

• git submodules字面理解就是子模块的意思。我们把需要共享的资源放在子仓库中，主项目通过拉取子仓库的代码，从而达到资源共享。这个考虑要维护多个git仓库，加上Jenkins部署不太方便，不做考虑了。

pnpm monorepo

• 简单来说就是，将多个项目或包文件放到一个git仓库来管理。开源社区中诸如vue、elementPlus的项目都是基于Monorepo去维护的一个简单的monorepo的目录结构类似这样：

  根目录

  ├── .husky git commit提交校验钩子

  ├── libs 公共组件、方法

  │ ├── docs [组件文档-这里可以使用vitePress]

  | ├── package.json

  ├── packages 不同项目根目录

  │ ├── pkg1 [子项目1]

  | | ├── package.json

  │ ├── pkg2 [子项目2]

  | | ├── package.json

  ├── .commitlintrc.js git commit提交规范

  ├── README.md

  ├── package.json

  ├── pnpm-lock.yaml

  └── pnpm-workspace.yaml

• 启动不同项目，需要先cd到该项目根目录，packages/*，每个项目单独启动部署

• 这里libs公共组件的包名是取的libs/package.json文件的name字段，如@libs/name

• 其他子项目中安装公共组件

  pnpm add '@libs/name'
  
  // main.ts
  import libsName from '@libs/name'
  app.use(libsName)