pnpm 多包管理项目

Monorepo是一种项目管理方式，就是把多个项目放在一个仓库里面，可以参考神三元大佬的一篇文章：现代前端工程为什么越来越离不开 Monorepo?，这篇文章中介绍了Monorepo的概念、收益以及MulitRepo的弊端

pnpm就是一个包管理工具，原生支持Monorepo，比npm和yarn更快一些，其他的可以参考官网和神三元大佬的另一篇文章：为什么现在我更推荐 pnpm 而不是 npm/yarn?

pnpm的依赖并不是全部打平下载到node_modules下的,我们都知道,如果是npm或者yarn下载的依赖包的话,他会打平整个依赖结构 那什么是打平结构呢 ,其实就是将所有的依赖都放在同一级去展示,因为我们的所以来的库可能又依赖了别的库,以此类推可能层层嵌套,这个时候yarn和npm 会将他们打平,也就是将这些嵌套的依赖统统整理到node_modules下. 但是这样会造成一个问题,那就是一些没有在package.json里声明的包我们也可以引入进来.这样会造成极大的隐患.

而pnpm则采用了这种方式

image.png

将所有在描述文件中声明的包下载到node_modules下,同时将他们所依赖的依赖包下载到.pnpm文件夹下

Monorepo的管理方式就自然会出现依赖重复，或者自己写的某个包依赖于另一个包这种情况。而pnpm的workspace以及他的依赖管理策略就很好的解决了这一问题,

接下来就让我们从零开始使用pnpm去搭建一个Monorepo系统吧

首先安装pnpm

npm install pnpm -g

然后新建一个文件夹,用ide打开之后初始化这个文件夹的package.json,也就是我们的项目描述文件

pnpm init

接着新建pnpm-workspace.yaml文件 ,里面写上需要建立workspace的文件夹

packages:
  # packages下所有的子包
  - 'packages/*'
  # components文件夹下所有的子包
  - 'components/**'
  # api文件夹下所有的子包
  - 'api/**'

接着我们去创建一个packages文件夹.同时也创建一个api文件夹和conponents文件夹.
api和components文件夹就代表我们的内部使用的包.需要被多个子应用给引用到.而packages则放置我们的子应用. 最终的一个目录结构应该是这样的

image.png

当我们需要安装依赖的时候,使用pnpm install 命令就会自动检索所有的工作空间的package.json文件里记录的依赖.

如果需要给某一个子包下载依赖的话,可以使用

pnpm -F 子包名 add 需要下载的包名

pnpm 可以通过-F 来选择不同的子包.

需要注意的是你的子包名字最好自己重新命名一个,修改package.json的name字段,因为如果再npm库里有和你同名的包的话,pnpm好像是会去网上下载的,而不会直接使用你本地的子包.

当下载了本地的子包后可以指定@*这样,就会实时使用最新的包.

image.png