npm、yarn、pnpm 包管理器全解析

前言

npm、yarn、pnpm作为前端nodejs的包管理器,相信大家都并不陌生,那么他们有什么区别,又有什么相同的点呢。这篇文章将作出仔细的解析,觉得有用的小伙伴,欢迎点赞收藏。

npm

首先介绍作为包管理器的老大哥npm,为什么这么说呢?因为npm是nodejs默认自带的包管理器,安装nodejs时一并安装了npm。

使用介绍

(1)npm的使用场景主要有以下几个:

1、用户可以从NPM服务器下载别人编写的第三方包到本地使用。
2、用户可以从NPM服务器下载并安装别人编写的命令行程序到本地使用。
3、用户将自己编写的包或者命令行程序上传到NPM服务器供别人使用。

(2)npm提供了官方的镜像管理仓库,由于国内网络环境,可以通过npm config set registry https://registry.npm.taobao.org来切换为淘宝镜像。当然除了直接设置仓库源地址还可以安装 nrmnrm 是npm 源管理器,允许你快速地在npm源间切换,安装方法也很简单使用npm install -g nrm就能非常方便地切换不同的镜像源了。当然也可以自定义添加私有的npm源。更多使用方法,有需要的小伙伴可以自行查阅,此处不再过多赘述。

(3)如果需要更新为最新版本的npm,可以使用 npm install npm@latest -g来安装。

命令

通过npm命令的使用可以很方便地管理本地的依赖包,以下是一些常用的NPM命令:

sql 复制代码
npm -v:查看npm安装的版本。
npm install npm@latest -g:升级npm版本。
npm install:下载依赖。
npm init:初始化,会引导创建一个package.json文件,包括名称、版本、作者等信息。
npm init --yes(-y):初始化(跳过向导)。
npm install 包名 --save-dev(npm install 包名 -D):开发环境安装的包。
npm install 包名 --save(npm install 包名 -S):开发/生产环境安装的包。
npm list(npm ls --depth=搜索的深度):查看当前目录下已安装的node包。
npm list -g:查看全局已经安装过的node包。
npm view express:查看node模块的package.json文件夹。
npm root:查看当前包的安装路径。
npm root -g:查看全局的包的安装路径。
npm search packageName:发布一个npm包时,检验某个包名是否已存在。
npm uninstall [package] :卸载某个依赖
npm update :更新所有依赖
npm update [package]:更新某个依赖

package.json

package.json位于模块的目录下,用于定义包的属性。

less 复制代码
name - 包名。
version - 包的版本号。
description - 包的描述。
homepage - 包的官网 url 。
author - 包的作者姓名。
contributors - 包的其他贡献者姓名。
dependencies - 依赖包列表。如果依赖包没有安装,npm 会自动将依赖包安装在 node_module 目录下。
devDependencies -只是我们在本地或开发坏境下运行代码所依赖的
repository - 包代码存放的地方的类型,可以是 git 或 svn,git 可在 Github 上。
main - main 字段指定了程序的主入口文件,require('moduleName') 就会加载这个文件。这个字段的默认值是模块根目录下面的 index.js。
keywords - 关键字

lock 文件

在 package.json 跟踪的依赖项和版本总是不准确的,因为 ~ ^ * 等前缀表示依赖更新时对应的版本范围。 范围版本可以在更新依赖时自动升级依赖到兼容性的次要版本或者补丁版本,让软件包支持最新的功能或者修复最近的错误。 所以,为了避免不同设备安装依赖时的版本不匹配的问题,在 lock 文件中定义了精确的安装版本。在每次新装(更新)依赖时,npm 和 yarn 会分别创建(更新) package-lock.json 和 yarn.lock 文件。这样就能保证其他设备安装完全相同的包。 在 pnpm 中,则是使用 pnpm-lock.yaml 文件定义依赖包的精确版本。

package.json中版本号的意思: 2.2.3 2是主版本号(major):当你做了不兼容的 API 修改 2是次版本号(minor):当你做了向下兼容的功能性新增,可以理解为 Feature 版本 3是修订号(patch):当你做了向下兼容的问题修正,可以理解为 Bug fix 版本 在 npm 的依赖的规则中,还有 ~、>、<、=、>=、<=、-、||、x、X、* 等符号;当使用 npm install XX 时,被安装的依赖的版本号前会默认加上 ^ 符号。 ^ :表示同一主版本号固定中,不小于指定版本号的版本号 比如^2.2.1.前面的第一个2固定。后面的不能小于他。 ~:表示次版本号固定。不小于指定版本号 ~1.5.1允许安装版本号大于1.5.1但小于1.6.0版本的模块

上传自己的包到npm

npm的另一个使用场景,我们可以将自己写的代码依赖上传到npm中供他人使用,具体步骤如下:

(1)首先需要在npm官网注册一个自己的账号,官网地址https://www.npmjs.com/signup;

(2)接下来就可以使用npm adduser来向本地添加npm用户,窗口将自动跳转浏览器进行登录。
(3)登录成功后可以使用npm whoami命令来判断是否登录成功,如下所示:

(4)进入我们需要发布的npm包的文件夹,执行命令npm publish --access public,命令运行成功就可以通过到npm官网查询我们上传到npm包,并可以通过npm命令下载使用。

yarn

yarn 在 npm 的基础上进行了改进和增强,旨在提高依赖包的安装速度和可靠性。 相对于 npm,yarn 有以下几个特点: 快速:yarn 通过并行安装依赖包,从而比 npm 更快地完成依赖包的安装。 可靠:yarn 会生成一个锁定文件(yarn.lock),确保每次安装的依赖包版本是相同的,从而避免了版本不一致的问题。 安全:yarn 通过对依赖包的哈希校验,确保安装的依赖包是安全的,并且没有被篡改。 离线模式:yarn 可以在没有网络的情况下运行,从而提高了开发者的灵活性。

使用

(1) 安装

bash 复制代码
# 全局安装
npm install -g yarn
# 查看 Yarn 版本信息
yarn -v

(2) 常用命令

csharp 复制代码
1、yarn init // 初始化一个 package.json 文件。您可以提供一些信息,例如项目名称、版本号、作者、描述等。

2、yarn add [package] //该命令将安装指定的软件包并将其添加到项目依赖项中。可以使用 @ 版本前缀来安装特定版本的软件包。例如:yarn add package@1.0.0。

3、 yarn remove [package] /该命令将从项目依赖项中删除指定的软件包。

4、yarn upgrade [package] //该命令将更新指定软件包的版本。您可以使用 @ 版本前缀来更新特定版本的软件包。例如:yarn upgrade package@1.0.0。

5、yarn install //该命令将根据项目中的 package.json 文件安装所有依赖项。如果您在运行时指定了 --production 标志,则只会安装生产依赖项。

6、yarn cache clean //该命令将清除 yarn 的缓存。这可能会释放一些磁盘空间并解决某些依赖项问题。

7、yarn global add [package] //该命令将全局安装指定的软件包。这通常用于安装全局命令行工具。

8、yarn global remove [package] //该命令将从全局安装中删除指定的软件包。

9、yarn list //该命令将列出当前项目中的所有依赖项。

10、yarn run [script] //该命令将运行项目中指定的脚本。例如:yarn run start。

11、yarn test //该命令将运行项目中的测试脚本。

12、yarn build //该命令将根据项目中的配置文件构建项目。

13、yarn publish //该命令将发布您的软件包到 Yarn 存储库中。

14、yarn info [package] //该命令将显示有关指定软件包的详细信息。

pnpm

pnpm是nodejs的另一个包管理器,类似于npm和yarn,但是采用了不同于他们两者的方式来管理依赖包。使用 npm 时,依赖每次被不同的项目使用,都会重复安装一次。而在使用 pnpm 时,依赖会被存储在内容可寻址的存储中,所以: (1)如果你用到了某依赖项的不同版本,只会将不同版本间有差异的文件添加到仓库。 例如,如果某个包有100个文件,而它的新版本只改变了其中1个文件。那么 pnpm update 时只会向存储中心额外添加1个新文件,而不会因为仅仅一个文件的改变复制整新版本包的内容。 (2)所有文件都会存储在硬盘上的某一位置。 当软件包被被安装时,包里的文件会硬链接到这一位置,而不会占用额外的磁盘空间。 这允许你跨项目地共享同一版本的依赖。 因此,您在磁盘上节省了大量空间,这与项目和依赖项的数量成正比,并且安装速度要快得多!

安装使用

csharp 复制代码
npm install -g pnpm  //通过npm全局安装pnpm
yarn global add pnpm //使用 yarn 全局安装

pnpm常用命令

scss 复制代码
1、pnpm install //用于安装项目中的所有依赖。

2、pnpm install [package] //用于安装指定的依赖包,例如 pnpm install vue

3、pnpm install --global [package] //用于全局安装指定的依赖包,例如 pnpm install --global typescript。

4、pnpm update //用于更新项目中的所有依赖。

5、pnpm update [package] //用于更新指定的依赖包,例如 pnpm update vue

6、pnpm remove [package] //用于删除指定的依赖包,例如 pnpm remove vue

7、pnpm list //用于列出当前项目中已安装的所有依赖包。

8、pnpm list --global //用于列出当前系统中已全局安装的所有依赖包。

9、pnpm list --depth=1 //用于列出当前项目中已安装的所有依赖包及其直接依赖项。

10、pnpm info [package] 用于查看指定依赖包的详细信息,例如 pnpm info vue

11、pnpm add [package] --save-dev //用于将指定的依赖包添加到 devDependencies,例如 pnpm add jest --save-dev。

12、pnpm add [package] --save //用于将指定的依赖包添加到 dependencies,例如 pnpm add vue --save。

13、pnpm add [package] --global //用于全局安装指定的依赖包,例如 pnpm add typescript --global。

14、pnpm rebuild //用于重新构建项目中的所有依赖。

15、pnpm run [script] //用于运行项目中的脚本命令,例如 pnpm run start。

16、pnpm store status //用于查看本地包存储状态。

17、pnpm store prune //用于清理本地存储的未被任何项目使用的包。

18、pnpm store add [package] //用于将指定的依赖包添加到本地存储,以便其他项目使用。

19、pnpm server //用于启动本地包服务器。

20、pnpm recursive [command] //用于在所有项目中执行指定命令,例如 pnpm recursive install。

npm、yarn、pnpm的区别

上面分别介绍了npm、yarn和pnpm,它们之间存在一些重要的区别,主要在安装速度、占用空间、兼容性、可靠性、功能和工作区支持等方面有所不同。

  1. 安装速度和占用空间: npm:使用逐个安装的算法,相对较慢。同时,它下载整个依赖树,可能导致占用较大的磁盘空间。 yarn:使用并行安装算法,可以更快地安装依赖项。此外,yarn有一个统一的全局缓存,可以更有效地管理已安装的包,从而节省空间。 pnpm:安装速度通常比npm和yarn更快,因为它只下载必需的模块,而不是整个依赖树,并使用硬链接和符号链接来进一步节省磁盘空间。
  2. 兼容性: npm:作为Node.js的官方包管理器,npm具有最好的兼容性,尤其在新版本的Node.js中。 yarn和pnpm:虽然与npm兼容,但在使用旧版本的Node.js时可能会遇到一些问题。
  3. 可靠性: yarn:可靠性通常比npm和pnpm更高,因为它使用了多线程下载和安装,减少了失败的风险,并且使用锁定文件(yarn.lock)来确保安装的模块与项目的依赖项相匹配。 npm和pnpm:在可靠性方面可能稍逊于yarn,但也在不断努力改进。
  4. 功能: yarn:提供了一些额外的功能,如缓存、自动解析和自动重试等,这些功能可以提高开发效率。 pnpm:也提供了一些独特的功能,例如通过链接来共享依赖项,从而进一步优化了磁盘空间的使用。
  5. 工作区支持: Yarn和npm:都支持工作区(workspaces)功能,允许在多个相关项目之间共享依赖关系。 pnpm:在这方面可能稍逊于yarn和npm。

总结

以上便是npm、yarn、pnpm的主要使用介绍和区别点,作为开发者,可以根据自己的需要选取不同的包管理器。觉得本文比较有用的小伙伴记得点赞收藏哦😊

相关推荐
undefined&&懒洋洋7 分钟前
Web和UE5像素流送、通信教程
前端·ue5
大前端爱好者2 小时前
React 19 新特性详解
前端
随云6322 小时前
WebGL编程指南之着色器语言GLSL ES(入门GLSL ES这篇就够了)
前端·webgl
随云6322 小时前
WebGL编程指南之进入三维世界
前端·webgl
寻找09之夏3 小时前
【Vue3实战】:用导航守卫拦截未保存的编辑,提升用户体验
前端·vue.js
多多米10054 小时前
初学Vue(2)
前端·javascript·vue.js
柏箱4 小时前
PHP基本语法总结
开发语言·前端·html·php
新缸中之脑4 小时前
Llama 3.2 安卓手机安装教程
前端·人工智能·算法
hmz8564 小时前
最新网课搜题答案查询小程序源码/题库多接口微信小程序源码+自带流量主
前端·微信小程序·小程序
看到请催我学习4 小时前
内存缓存和硬盘缓存
开发语言·前端·javascript·vue.js·缓存·ecmascript