pnpm 多包管理项目

简介: 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

目录
相关文章
|
存储 缓存 资源调度
包管理npm、yarn、pnpm区别
包管理npm、yarn、pnpm区别
134 0
|
2月前
|
JavaScript 前端开发 Java
npm学习一:npm 包管理工具 学习、使用。
这篇文章是关于npm包管理工具的学习、使用指南,包括npm概述、基础命令和如何安装webpack。
80 3
npm学习一:npm 包管理工具 学习、使用。
|
7月前
npm 包管理
npm 包管理
41 0
|
7月前
|
JSON JavaScript 数据格式
使用pnpm搭建monorepo开发环境
使用pnpm搭建monorepo开发环境
338 0
|
7月前
|
JavaScript 前端开发 API
npm 包管理工具
npm 包管理工具
111 0
|
7月前
|
JavaScript 前端开发 开发工具
npm安装依赖实践总结
npm安装依赖实践总结
558 0
|
存储 资源调度 安全
pnpm:基础使用
pnpm:基础使用
451 0
|
缓存 分布式计算 前端开发
从npm版本依赖到Monorepo大仓项目
前端的发展很快,自从node.js的出现,打开前端新的大门,npm让js有了自己的包管理能力,能够让前端项目工程化,从而能够处理更加复杂的前端项目。
302 0
|
存储 JSON 资源调度
NPM 包管理器简介
NPM 包管理器简介

热门文章

最新文章