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
网友评论