第Ⅰ章-IV npm yarn pnpm 包管理器

第Ⅰ章-Ⅰ 了解Vue3 创建一个Vue3项目
第Ⅰ章-Ⅱ Vue3自定义创建项目 项目文件详解
第Ⅰ章-III Vite 创建vue3 项目
第Ⅰ章-IV npm yarn pnpm 包管理器

第Ⅰ章-IV npm yarn pnpm 包管理器

简介

它们用于帮助开发者管理项目中的依赖关系。

npm

随Node.js一起发布,因此得到广泛采用。

工作原理

npm 通过package.json文件管理项目的依赖。当你安装一个包时,npm会将包及依赖下载到node_modules目录中

  • 广泛的生态系统,有大量可用的包
  • 可能会出先重复包的问题,因为每个包可能会下载多个相同的子依赖。
    版本锁文件:package-lock.json

yarn

2016年Facebook(Meta)发布,作为npm的替代品。它解决了当时npm在版本锁定和网络性能方面的一些问题。

工作原理

也是用pacakge.json文件,并在安装依赖时生成一个yarn.lock文件,确保项目依赖的一致性。

  • 更快的安装速度和更好的依赖缓存机制。
  • 提供了并行安装机制,加快了包的安装过程。

版本锁文件:yarn.lock

pnpm

允许多个项目共享相同的包版本,而无需多次下载或存储。

工作原理

使用成为"硬链接"\^1的方法来管理node_modules,允许多个项目共享相同的包版本,而无需多次下载或存储。

  • 高效存储管理,使用硬链接和符号链接减少重复数据的存储。
  • 更快的执行速度,在出现大量共享依赖。
  • 严格的依赖书管理。

版本锁文件:pnpm-lock.json

如果项目需要优化磁盘使用或有大量重复依赖 可以选择pnpm

如果你需要更快的依赖安装和稳定的依赖管理可以选择yarn

\^1对文件系统中的实际文件的另一个引用或指针。硬链接与文件名的关系时多对一的关系。

功能脚本

添加依赖

复制代码
npm install [package] / npm i [package]
yarn add [package]
pnpm pnpmadd [package]

移除依赖

复制代码
npm uninstall [package]
yarn add [package]
pnpm add [package]

安装所有依赖

复制代码
npm update [package]
yarn upgrade [package]
pnpm update [package]

查看依赖信息

复制代码
npm info [package]
yarn info [package]
pnpm info [package]

缓存管理

复制代码
npm cache clean --force
yarn cache clean
pnpm store prune

运行脚本

复制代码
npm run [script]
yarn run [script]
pnpm run [script]

提示:npm 中run关键词在大多数情况下必须。yarn 允许执行脚本省略。pnpm允许你执行任何脚本时省略run.

切换源

复制代码
npm config set registry 镜像
yarn config set registry 镜像
pnpm cconfig set registry 镜像

临时切换源

复制代码
npm install [package] --registery 镜像
yarn add [package] --registery 镜像
pnpm add [package] --registery 镜像

常用源

相关推荐
To_OC7 小时前
别再串行写 await 了,Promise.all 才是并行请求的正确打开方式
前端·javascript·promise
vipbic7 小时前
中后台越做越乱后,我用插件化把它救回来了
前端·vue.js
Hyyy8 小时前
Computer Use 适合做什么,不适合做什么——一次真实使用后的思考
前端
小和尚同志8 小时前
前端 AI 单元测试思考与落地
前端·人工智能·aigc
invicinble9 小时前
c端系统,其实更像一个信息展示平台
前端
李姆斯10 小时前
管理是否可以被完全量化
前端·产品经理·团队管理
名字还没想好☜11 小时前
Next.js 中间件实战:鉴权、重定向与 A/B 分流
开发语言·前端·javascript·中间件·react·next.js
广州灵眸科技有限公司11 小时前
瑞芯微RV1126B开发板(EASY-EAI-PI2) INI文件操作
java·前端·javascript·网络·人工智能
kaiking_g11 小时前
vue项目中,静态导入 vs 动态导入 详解
前端·javascript·vue.js
江华森11 小时前
Web 开发基础:HTTP 与 REST
前端·网络协议·http