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

目录
相关文章
|
存储 JavaScript 前端开发
架构-单一代码库-monorepo-pnpm-workspace:基本使用
架构-单一代码库-monorepo-pnpm-workspace:基本使用
1855 0
webpack优化篇(四十):速度分析:使用 speed-measure-webpack-plugin
webpack优化篇(四十):速度分析:使用 speed-measure-webpack-plugin
2669 0
webpack优化篇(四十):速度分析:使用 speed-measure-webpack-plugin
|
缓存 资源调度 前端开发
微前端-qiankun:vue3-vite 接入 vue3、nuxt3、vue2、nuxt2等子应用
微前端-qiankun:vue3-vite 接入 vue3、nuxt3、vue2、nuxt2等子应用
3149 0
|
6月前
|
人工智能 前端开发 JavaScript
前端组件库——shadcn/ui知识点大全(三)
教程来源 http://lemci.cn/ shadcn/ui通过Tree Shaking、动态导入、Tailwind JIT等实现极致性能优化,Bundle仅增20–50KB;组件即代码,完全可控、可定制、易维护,契合Next.js+Tailwind现代栈与AI协作开发。
|
6月前
|
前端开发 JavaScript 数据可视化
前端组件库——Radix UI知识点大全(一)
教程来源 https://bncne.cn/ Radix UI是React生态中革命性的无样式组件原语库,专注提供高可访问性、键盘导航完备、ARIA合规的底层交互逻辑,将样式完全交由开发者掌控,完美平衡定制自由与无障碍标准,已成为shadcn/ui等主流工具的底层基石。
|
自然语言处理 JavaScript 前端开发
vue3-ts-vite:vue 项目 配置 多页面应用
vue3-ts-vite:vue 项目 配置 多页面应用
3613 0
|
移动开发 Unix Linux
拉取代码编辑器中报错`Delete ␍ prettier/prettier` 问题的解决方案
通过正确配置Prettier、EditorConfig文件和编辑器设置,可以有效解决 `Delete ␍ prettier/prettier`的问题。这不仅能避免频繁的格式化错误,还能确保团队成员在不同开发环境下的代码风格一致,提升项目的代码质量和可维护性。按照上述解决方案调整配置后,您的项目将更加规范,代码也会更具一致性。
2021 4
|
JSON JavaScript 前端开发
TypeScript(十六)配置相关(tsconfig配置)
TypeScript(十六)配置相关(tsconfig配置)
1090 1
|
JavaScript
解决Vue 3 + Element Plus树形表格全选多选以及子节点勾选的问题
解决Vue 3 + Element Plus树形表格全选多选以及子节点勾选的问题
|
存储 缓存 资源调度
Monorepo(单体仓库)与MultiRepo(多仓库): Monorepo 单体仓库开发策略与实践指南
Monorepo(单体仓库)与MultiRepo(多仓库): Monorepo 单体仓库开发策略与实践指南
1796 0