第Ⅰ章-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 镜像 ### 常用源 * 官方源:npm官方提供的默认源,地址是https://registry.npmjs.org/,但由于位于国外,速度较慢。 * 淘宝源:由淘宝团队提供的镜像源,地址是https://registry.npm.taobao.org/,是国内服务器,因此速度较快。 * 阿里源:由阿里巴巴提供的镜像源,地址是https://npm.aliyun.com/,同样是国内服务器,速度较快。

相关推荐
不爱吃饭爱吃菜30 分钟前
uniapp微信小程序一键授权登录
前端·javascript·vue.js·微信小程序·uni-app
90后小陈老师2 小时前
3D个人简历网站 5.天空、鸟、飞机
前端·javascript·3d
不爱吃糖的程序媛5 小时前
浅谈前端架构设计与工程化
前端·前端架构设计
郝YH是人间理想7 小时前
系统架构设计师案例分析题——web篇
前端·软件工程
Evaporator Core7 小时前
深入探索:Core Web Vitals 进阶优化与新兴指标
前端·windows
初遇你时动了情7 小时前
html js 原生实现web组件、web公共组件、template模版插槽
前端·javascript·html
QQ2740287568 小时前
Soundness Gitpod 部署教程
linux·运维·服务器·前端·chrome·web3
前端小崔8 小时前
从零开始学习three.js(18):一文详解three.js中的着色器Shader
前端·javascript·学习·3d·webgl·数据可视化·着色器
哎呦你好8 小时前
HTML 表格与div深度解析区别及常见误区
前端·html
运维@小兵8 小时前
vue配置子路由,实现点击左侧菜单,内容区域显示不同的内容
前端·javascript·vue.js