认识前端包常用包管理工具（npm、cnpm、pnpm、nvm、yarn）

最新推荐文章于 2025-06-05 16:04:16 发布
最新推荐文章于 2025-06-05 16:04:16 发布
阅读量727 收藏
点赞数 1
分类专栏： 你的npm包 Vue Nodejs 后端 文章标签： 前端 npm node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Code_King006/article/details/134503269
版权
本文详细介绍了前端常用的包管理工具，包括npm、cnpm、yarn、pnpm以及nvm的安装、使用方法和优缺点。同时，提到了nrm和yrm用于管理镜像源，以提高包的下载速度。文章强调了正确选择和使用这些工具对于前端工程化和项目维护的重要性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

随着前端的快速发展，前端的框架越来越趋向于工程化，所以对于包的使用也越来越多，为了优化性能和后期的维护更新，对于前端包的管理也尤为重要，本文主要阐述对node中包管理工具的理解和简单的使用方法。也欢迎各位大佬和同行们多多指教。😁😁😁

在这里插入图片描述

👉1. npm

安装npm

  • 通过 node.js 网站安装node获取对应版本的npm

  • 使用版本管理器nvm安装 node.js 和 npm
    * 由于npm 和 node.js产品由不同的实体管理，更新和维护可能变得复杂，而且，nodejs安装过程将npm安装在一个只有本地权限的目录中，当试图全局运行包时，可能会导致权限错误
    * 使用节点版本管理器(nvm)来安装npm。版本管理器将避免权限错误，轻松地切换npm和节点版本，并将解决更新Node.js和npm的复杂性

  • npm -v 查询当前本地安装的npm版本

  • npm install npm@6.14.14 -g 更新到指定版本

  • npm 安装版本过高无法支持当前低版本的node，会报错，但是可以正常打包。
    npm WARN cli npm v9.8.1 does not support Node.js v14.15.4. This version of npm supports the following node versions: ^14.17.0 || ^16. 13.0 || >=18.0.0. You can find the latest version at https://nodejs.org/.

  • vue项目的package.json一般会注册npm的版本号，过低会导致无法打包(npm run build)vue项目

    "dependencies": {
     "npm": "^9.8.1",
}

     "engines": {
    "node": ">= 10.13.0",
    "npm": ">= 5.0.0"
  },

  • npm和node版本对照官网：https://nodejs.org/zh-cn/download/releases/
    在这里插入图片描述

缺点

  • npm install拉node_modules比较慢，安装的时候包会在同一时间下载和安装，中途某个时候，一个包抛出了一个错误，但是npm会继续下载和安装包，因为npm会把所有的日志输出到终端，有关错误包的信息就会在一大堆npm打印的警告中丢失掉，并且可能永远不会注意到实际发生的错误。
  • 同一个项目，安装的时候无法保持一致性，导致相同项目，有的人是ok的，有的人由于安装的版本不一致出现bug
  • package.json文件中版本号代表不同的含义
    • 4.0.3 安装指定的版本
    • ~4.0.3 安装4.0.x中的最新版本
    • ^4.0.3 表示安装4.X.X中最新的版本

👉2. cnpm(国内镜像文件 快)

  • npm install -g cnpm --registry=https://registry.npm.taobao.org (cnpm安装)
  • npm安装模块时，是通过npm官网进行的，但是由于其服务器在国外，所以下载速度比较缓慢，容易请求超时，容易下载错误。
  • 示例：
    下载失败再次下载完成，但是不能够正常使用，这个这个问题是由于缓存引起的，可以清理上一次的下载缓存后再重新下载，因为你自己查看日志错误发生点不太现实，由此推出了cnpm
  • cnpm是npm其中的一个插件，由阿里巴巴的淘宝团队推出的国内镜像源。

👉3. yarn(并行下载 快)

  • 安装 Yarn，提升依赖的安装速度
  • npm install --global yarn
  • yarn install yarn 安装

同样作为包管理工具，与npm显著不同的是，yarn是并行安装，二次安装下载的模块时，从缓存中取出；而npm是顺序安装，二次安装下载的模块的时，会重新在官网下载。

yarn和npm命令对比

  • npm install / yarn
  • npm install react --save / yarn add react
  • npm uninstall react --save / yarn remove react
  • npm install react --save-dev / yarn add react --dev
  • npm update --save / yarn upgrade

👉4. pnpm / 安装 pnpm，提升依赖的安装速度

  • npm config set registry https://registry.npmjs.org npm install -g pnpm
  • pnpm install 安装

pnpm，performant npm，意味"高性能的npm"，在使用命令上和npm有一些区别，关键在于效率上，作为一款包管理器相较于其他包管理器的优势在于它拥有更高的安装速度和更高的磁盘利用率。

在这里插入图片描述

👉5. nvm管理node版本

每个项目的需求不同，进而不同项目必须依赖不同版本的NodeJS运行环境，方便的在同一台设备上进行多个node版本之间切换。

nvm下载

注意：安装nvm时不能安装任何node版本（如存在请删除后再安装nvm），再检查环境变量，如果还有node.js相关也删掉，保证系统无任何node.js 残留。

安装包下载地址：https://github.com/coreybutler/nvm-windows/releases，windows系统下载nvm-setup.zip安装包

E5%85%B7%E5%8C%85_files%2F6.jpg&pos_id=img-RG46BCZe-1700465302103)

nvm安装

  • 安装步骤

    • 卸载当前电脑中的node版本

    • 按照流程一步步安装nvm

    • 确保nvm安装文件夹中一定要有node.js文件夹快捷方式
      在这里插入图片描述

    • 打开cmd，输入nvm 当显示以下内容时，即安装成功
      在这里插入图片描述

    • 安装完毕后输入 nvm -v 查看版本。

nvm配置

  • 打开nvm安装包里的setting.txt，进行设置
    在这里插入图片描述

    
node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

    在这里插入图片描述

  • 打开电脑的系统配置，设置全局变量

    NVM_HOME     D:\nvm\nvm
NVM_SYMLINK  D:\nvm\nvm\node.js

nvm命令

  • 使用nvm控制nodejs的版本需要使用nvm安装对应版本的nodejs

  • 常用的nvm命令：

    • nvm v 查询nvm的版本
    • nvm h 显示帮助
    • nvm install 版本号 安装对应版本的nodejs
    • nvm install 安装最新版本的nodejs
    • nvm install stable 安装最新稳定版本的nodejs
    • nvm uninstall 版本号 卸载对应版本的nodejs
    • nvm on 启用node.js版本管理
    • nvm off 禁用node.js版本管理(不卸载任何东西)
    • nvm ls / nvm list 显示所有安装的node.js版本
    • nvm list available 显示可以安装的所有node.js版本
    • nvm use 版本号 切换指定的nodejs版本

【注意】

nvm use <version> 切换完对应版本的nodejs后，使用 nvm ls / nvm list 会发现切换完的指定版本会出现*,这就表示切换成功。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
那么，如果版本前的*不显示会怎么样，有什么解决方法？

* 不显示会导致node切换版本失败，node和npm也无法使用。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

解决方法

在nvm安装文件夹中，一定要有node.js快捷方式文件，如果没有，可以将版本安装包复制一份快捷方式,重命名为node.js,问题迎刃而解。
在这里插入图片描述
nvm use 版本号 nvm重新切换nodejs的版本号
在这里插入图片描述
nvm list 查看选定的版本前是否有*
在这里插入图片描述

👉6. nrm / yrm 管理镜像文件工具

  • 通过命令全局下载： cnpm install -g yrm
  • yrm -h 获取命令作用指南
  • yrm ls 显示所有的镜像源
  • yrm use ‘源名称’ 更换镜像源
  • yrm test ‘源名称’

目前常用镜像

npm ---- https://registry.npmjs.org/
cnpm — https://registry.nlark.com/
taobao - https://registry.npm.taobao.org
yarn — https://registry.yarnpkg.com/
tencent- https://mirrors.cloud.tencent.com/npm/

查看当前包管理镜像地址

yarn config get registry

npm config get registry

cnpm config get registry

pnpm config get registry

设置镜像源

全局使用

yarn config set registry https://registry.npm.taobao.org

cnpm config set registry https://registry.nlark.com/

临时在项目中使用

npm install --registry https://registry.npm.taobao.org

👉👉包管理总结

windows用户：推荐使用yarn/npm，可能cnpm/pnpm安装速度优于yarn/npm，但是可能造成诡异的 bug，比如项目运行不起来等

一三四、npm、cnpm、yarn、pnpm、npx、nvm的区别
梅某某
05-30 1433
1、npm： 中文文档：https://www.npmjs.cn/ （1）npm install的时候巨慢。特别是新的项目拉下来要等半天，删除node_modules，重新install的时候依旧如此。 （2）同一个项目，安装的时候无法保持一致性。由于package.json文件中版本号的特点，下面三个版本号在安装的时候代表不同的含义。 “5.0.3”表示安装指定的5.0.3版本，“～5.0.3”表示安装5.0.X中最新的版本，“^5.0.3”表示安装5.X.X中最新的版本。这就麻烦了，常常会出现同一个项
node与npm与cnpm与pnpm关系
youmashengyue的博客
02-05 374
npm：npm全称Node Package Manager，是 Node.js 平台的默认软件包管理器，用于安装、发布和管理 Node.js 应用程序和软件包。由于 npm 的原始服务器位于国外，对于中国大陆的用户来说，下载和安装 Node.js 包时可能会遇到速度较慢或连接不稳定的问题。与npm和yarn不同，pnpm使用一种称为“符号链接”的方法来管理包依赖，称为硬链接（hard links），这可以节省磁盘空间并提高安装速度，并确保同一个包的不同版本之间共享尽可能多的代码。（4）查看node版本。
npm、cnpm、nrm、nvm
weixin_45734909的博客
09-14 291
npm install --save -dev (npm install 包名 -D)：安装只用于开发环境，不用于生产环境，会出现在package.json文件的dependenceies中。npm install --save(npm install 包名 -S)：安装的包需要发布到生产环境，会出现再package.json文件的dependenceies中。nrm add regisery url 命令代表添加源包管理器，registry代表源包名，url代表包管理器的下载url地址。
nodejs和npm版本不匹配的解决方法
weixin_44280273的博客
11-30 1万+
遇见问题： 今天安装新的node.js后，做配置的时候，报错 “npm does not support Node.js v14.15.1”，问题应该是npm版本太旧，与新版本的node.js不匹配。 上网百度后，首先找到的是通过 “npm uninstall -g npm” 删除全局npm后重新安装。但是问题未解决。 解决办法： 最终找到一篇博客：npm dose not support Node.js v10.15.3 找到旧版node.js卸载后仍然存留的npm缓存文件并删除，则node自动更新响应版
npm，yarn，pnpm，cnpm，nvm，npx包管理器常用命令
ejinxian的专栏
05-02 1360
前端比较主流的包管理器主要有三个npm，yarn，pnpm多层级依赖，通常发生在依赖之间存在复杂的版本要求时包A依赖于包B@1.0.0包B依赖于包C@2.0.0另一个包D也依赖于C@3.0.0。
包管理工具npm、cnpm、yarn、NVM
2301_80480494的博客
05-06 1072
包]英文单词是package,代表了一组特定功能的源码集合包管理工具：管理[包]的应用软件,可以对[包]进行下载安装,更新,删除,上传等操作借助包管理工具,可以快速开发项目,提升开发效率包管理工具是一个通用的概念,很多编程语言都有包管理工具,所以掌握好包管理工具非常重要前端常用的包管理工具npm、yarn、cnpm。
谈谈前端包管理工具 npm & yarn & pnpm
FBm的博客
03-12 1万+
为什么需要包管理工具？ 每种主流编程语言都有包管理工具，比如 java 的 Maven、Gradle，Python 的 pip，nodejs 的 npm、yarn、pnpm 等。 包管理工具的主要作用是管理第三方依赖，也可以看成一个"轮子"工厂，每个人都可以上传自己造的"轮子"和下载使用别人的"轮子"， 包管理工具顾名思义就是统一管理这些轮子的软件或者工具，它以多种方式自动处理项目依赖关系、提供了命令行工具（CLI）、支持跟踪依赖项和版本等功能， 除此之外还可以安装、卸载、更新和升级包，配置项目设置，运行.
前端包管理工具 -- NPM、CNPM、NVM、NRM、YARN、NPX、PNPM
weixin_40240616的博客
08-06 965
前端包管理工具 -- NPM、CNPM、NVM、NRM、YARN、NPX、PNPM、常用命令整理。
node 包管理工具：npm、pnpm、cnpm、npx、yarn
热门推荐
freeking101的博客
11-20 4万+
node 包管理工具：npm、cnpm、pnpm、yarn、npx
【NPM】详解yarn 、npm 、 npx 、 cnpm 、 pnpm等包管理工具及其差异
VT_馒头的博客
06-23 1654
yarn 、npm 、 npx 、 cnpm 、 pnpm等包管理工具主要用于帮助开发者高效地管理项目中的各种依赖库、框架、工具以及其他代码模块。这些工具通过自动化的方式处理依赖的下载、安装、更新和卸载，确保项目中使用的每个外部组件都处于正确的版本，并且能够协同工作，避免版本冲突。
Node包管理工具 - nvm、npm、yarn、cnpm、pnpm
NOfighting的博客
12-05 2218
nvm : 可以实现一台电脑，拥有多个版本的Node npm : node package manager 下载Node后自带的一个包管理工具 yarn : npm 的升级版，更优秀 cnpm : 配置下载非官方地址的依赖（淘宝、华为、腾讯镜像） pnpm : performant node package manager 更优秀的npm包管理工具 nrm：下载镜像地址管理工具
包管理工具 nvm npm nrm yarn cnpm npx pnpm详解
aimcode
08-16 1923
包管理工具npm： Node Package Manager，也就是Node包管理器；如何下载和安装npm工具呢？npm属于node的一个管理工具，所以需要先安装Node；node管理工具：https://nodejs.org/en/，安装Node的过程会自动安装npm工具；npm管理的包可以在哪里查看、搜索呢？https://www.npmjs.org/ 这是安装相关的npm包的官网；全局安装yarn。
管理工具npm与cnpm、npx、nvm、yarn、pnpm的区别
wwv的博客
02-09 1769
管理工具npm与cnpm、npx、nvm、yarn、pnpm的区别
npm cnpm yarn pnpm nvm 区别
09-14
npm、cnpm、yarn、pnpm和nvm都是基于npm的包管理工具，它们都有一些共同的功能，如安装、卸载和更新包。然而，它们也有一些区别和特点。 1. npm是Node.js官方的包管理器，是最常用的工具之一。它具有广泛的社区支持...
【Web应用】若依框架：基础篇13 源码阅读-前端代码分析
做一个厉害的工程师
06-03 271
【Web应用】若依框架：基础篇13 源码阅读-前端代码分析
【Elasticsearch】search_after不支持随机到哪一页，只能用于上一页或下一页的场景
risc123456的博客
06-03 562
如果需要跳转到任意一页，`search_after` 无法直接实现，因为它无法像 `from` 和 `size` 那样通过偏移量直接定位到目标页。`search_after` 确实不支持随机访问（即直接跳到任意一页），因此在前端需要随机跳转到某一页的场景中，使用 `search_after` 是不合适的。根据你的描述，如果前端允许用户随意点击某一页，那么确实不适合使用 `search_after`，而应该使用 `from` 和 `size` 来实现分页功能。- 不支持随机访问，用户不能直接跳转到任意一页。
阿里云服务器安装nginx并配置前端资源路径（前后端部署到一台服务器并成功访问）
最新发布
2301_79201170的博客
06-05 773
​​​运行以下命令，。运行wget命令。您可以通过Nginx开源社区直接获取对应版本的安装包URL，然后通过wget URL的方式将Nginx安装包下载至ECS实例。例如，Nginx 1.21.6的下载命令如下：运行以下命令，，然后。make​./nginx​没有报错信息则代表nginx启动成功！启动防火墙服务放行80端口重加载防火墙使修改生效查看状态重启停止kill -9 端口号。
前端表单验证进阶：如何使用 jQuery.validator.addMethod() 编写自定义验证器(全是干货，建议收藏)
m0_56259289的博客
06-04 367
本文介绍如何使用 jQuery.validator.addMethod() 创建自定义表单验证方法。通过一个“禁止时间为 00:00”的案例，详细讲解验证函数的编写、错误信息处理、封装技巧及最佳实践。适用于需要扩展 jQuery Validation 插件的场景，帮助开发者实现更灵活的表单验证逻辑，提升前端开发效率与代码复用性。
2025年阿里最新软件测试面试题：Web 测试+接口测试+App 测试
2401_83387413的博客
06-05 611
上面就是我为大家整理出来的一份软件测试工程师发展方向知识架构体系图。希望大家能照着这个体系在1-2年内完成这样一个体系的构建。可以说，这个过程会让你痛不欲生，但只要你熬过去了。以后的生活就轻松很多。正所谓万事开头难，只要迈出了第一步，你就已经成功了一半，古人说的好“不积跬步，无以至千里。”等到完成之后再回顾这一段路程的时候，你肯定会感慨良多。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值
OSZAR »