[JavaScript知识库]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_modules

pnpm -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项目关联

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

碎碎念：

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