pnpm+monorepo实践
分类: WEB前端 474 0
前言
- 因为公司各个项目中好多业务部分是相似的,免不了到处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
-
启动不同项目,需要先cd到该项目根目录,packages/*,每个项目单独启动部署
-
这里libs公共组件的包名是取的
libs/package.json
文件的name
字段,如@libs/name
-
其他子项目中安装公共组件
pnpm add '@libs/name' // main.ts import libsName from '@libs/name' app.use(libsName)
共 0 条评论关于 “pnpm+monorepo实践”