pnpm多包管理项目

pnpm官网
在今年的项目中，领导使用了monorepo多包管理模式来管理项目，具体使用技术为:

pnpm
vue3
vite
ant-design Vue
typescript
formilyjs 表单解决方案

pnpm

其中：pnpm 可以说是一个多包管理器，有以下优点

节约磁盘空间
提升安装速度

workspace 支持

对于 monorepo 类型的项目，pnpm 提供了 workspace 来支持，而且比yarn workspace配置更简单，只需在项目根目录下创建一个 pnpm-workspace.yaml 文件。具体可以参考官网文档

使用指南

1.安装：
npm install pnpm -g
2.初始化pnpm项目, 新建一个文件夹作为项目目录，在目录下执行指令（和 npm init 一致）：
pnpm init
3.安装依赖:
pnpm i

4.Workspace配置:
在项目下创建一个工作区的文件夹，例如 packages,里面可以包括多个项目文件，
在根目录创建一个workspace配置文件 pnpm-workspace.yaml，写入：

packages:# 所有在 packages 子目录下的 package- 'packages/**'# 不包括在 test 文件夹下的 package- '!**/test/**'

5.Monorepo常用指令

名词解释：
workspace_name：项目名称
package_name：安装包名称(vue,axios等）

安装依赖pnpm add <package_name> --filter <workspace_name> // 安装某个特定属性
pnpm i // 全局安装
pnpm i <package_name> --filter <workspace_name> // 安装某个特定属性运行脚本pnpm run serve --filter=<workspace_name>删除全局和每个workspace的node_modulespnpm -r exec rm -rf node_modules
pnpm rimraf  **/node_modules

启动项目命令集成

当有多个项目在packages的时候，可能需要在每个项目中寻找项目启动的命令，所以可以集成在根目录下面的package.json里面

{"private": true,"name": "pnpm-project","version": "1.0.0","description": "","main": "index.js","scripts": {"supervision-task:dev": "pnpm run serve --filter=supervision-task", "test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC"
}

下次启动项目的时候不用 pnpm run serve --filter=supervision-task这么长，可以直接执行 pnpm supervision-task:dev

pacakges项目关联

当有多个项目集成在packages下面时，可以用一个公共的shared项目文件夹存放各个项目的公共方法,通过index.ts文件导出方法
![在这里插入图片描述](https://img-blog.csdnimg.cn/4f30983cf82147b28aaa0d7e25014c32.png
然后在需要使用的项目中的packages.json里面添加 "shared": "workspace:*"，再重新执行pnpm i
使用：import { xxx } from 'shared';

碎碎念：

当前demo项目使用的webpack,不管是安装还是启动项目都非常慢，vite的出现解决了这个问题。后续demo会更改为vite