npm、yarn、cnpm、npx的详解

最新推荐文章于 2025-06-18 19:21:44 发布
原创 最新推荐文章于 2025-06-18 19:21:44 发布 · 1.8k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#git #javascript #前端

本文深入介绍了npm包管理器的基础知识及使用技巧，包括npm的工作原理、配置文件package.json的详细解释、依赖版本管理规则以及如何发布自己的npm包等内容。

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

每天对自己多问几个为什么，总是有着想象不到的收获。 一个菜鸟小白的成长之路（copyer）

摘抄于coderwhy老师

包管理工具npm

简介：

npm管理的包存放地址：

  • 发布自己的包是发布到 registry
  • 安装的包就是重 registry上下载的

npm的配置文件（package.json）

对于一个项目，需要很多的npm包，所以需要一个配置文件来管理。

  • 配置文件会记录着你的项目的名称，版本号，项目描述等
  • 也会记录着项目的所有依赖的其他库的信息和依赖库的版本号

得到配置文件（package.json）

  • 方式一： 手动从零创建项目 npm init [-y]
  • 方式二： 通过脚手架创建项目，脚手架会帮助我们生产package.json，并且里面有着相关的配置

注意：配置文件里面的name不能为中文


常见的属性

必须写的属性： name 、 version

  • name是项目的名称
  • version 是当前项目的版本号
  • description 是描述信息（对项目的简单描述）
  • author 作者的基本信息（发布时用到）
  • license 是开源协议（发布时用到）

private属性

  • private属性记录当前的项目是否是私有的
  • 当为true时，npm 不能发布它，这是为了防止私有项目或模块发布出去的方式

main属性

设置程序的入口， 安装模块的时候，知道模块的入口文件

scripts属性

  • scripts 属性用于配置一些脚本命令，以键值对的形式存在
  • 配置后，可以通过 npm run [key]来执行这个命令
  • npm start 和 npm run start的区别：
    • 等价的
    • 对于常用的start、test、stop、restart 可以直接省略掉 run 直接通过 npm start等方式运行

dependenices属性

  • dependencies属性是指定无论开发环境还是生产环境都需要依赖的包
  • 比如 vue、vuex、react、react-dom等等

devDependencies属性

  • 一些包在生产环境是不需要的，比如webpack，babel等
  • 这个时候我们会通过 npm install webpck --sase-dev，将它安装到devDependencies属性中

peerDependencies属性

  • 项目依赖关系是对等关系，也就是你依赖的一个包，它必须是以另外一个宿主包为前提的
  • 比如element-plus是依赖于vue3 的，antd 是依赖于 react，react-dom
  • 安装 element-plus的同时，也必须安装 vue3

依赖的版本管理

在安装的过程中，在配置文件中，会发现 ^2.0.3 或 ~2.0.3，这是什么意思呢

npm 的包通常需要遵从 semver 版本规范

semver版本规范是X.Y.Z

  • X 主版本号 （major）： 当你做了不兼容的API修改（可能不兼容之前的版本） vue2 和 vue3的区别
  • Y次版本号（minor）: 当你做了 向下兼容的功能性新增（新功能增加，但是兼容之前的版本）
  • Z修订号（patch）： 当你做了向下兼容的问题修正（没有新功能，修复了之前版本的bug）

^ 和 ~的区别

  • ^x.y.z：表示 x是保持不变的， y和z永远是安装最新的 版本
  • ~x.y.z: 表示x和y保持不变的，z永远安装最新的版本

npm install 命令

安装的npm包分为两种：

  • 全局安装（global install）: npm install webpack -g
  • 局部安装（local install）: npm install webpack

全局安装：只是针对于工具包子类的，并不为了在所有的项目中使用

局部安装： 就是针对当前项目使用


项目安装

开发时依赖

npm install axios 等价于 npm install axios --save 等价于 npm install axios -S

生产时依赖

npm install webpack --save-dev 等价于 npm install webpack -D


npm install 的原理

  • 执行npm install 他背后帮助我们完成了上面操作？
  • 还会发现生成一个 package-lock.json的文件，它的作用是什么呢
  • 从npm5开始，npm支持缓存策略，缓存有什么作用呢

先看一张图（coderwhy制作）

在这里插入图片描述

看着上面的图，就是分为两种情况，是否有 package-lock.json文件

情况一：没有lock文件

执行npm install的时候，

就会先检查各个包之间的依赖，构成依赖图，

然后从 registry仓库中，下载压缩包，添加到本地的缓存中，

接着就会压缩到node_modules，

同时还会生成 package-lock.json文件。

安装就完成了。

情况二： 有lock文件

存在 lock 文件，

先检查包的版本号，然后检查包的各自之间的依赖，构成依赖图

查看依赖的图的一致性：

  • 不一致： 就会直接去 registry仓库中重新下载，然后更新本地的缓存，也会跟新生成lock文件。

  • 一致： 就会去版本的缓存文件中去查找，拿取到压缩包，压缩到node_modules中，完成安装。


查看本地缓存的仓库

npm get cache
// 会获取到本地的仓库的路径

在这里插入图片描述

然后就点击进去，_cacache文件夹，

在这里插入图片描述

lock文件 存在一个加密的索引值，然后就是 index文件中去寻找压缩包的索引值，拿着压缩包的索引值就去content里面找。


清除缓存

npm cache clean

yarn 工具

  • yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具；

  • 出现主要是解决npm的不足之处

  • npm在npm5中，也在逐渐的优化

  • yarn也有lock文件，就是yarn.lock


npm 命令和 yarn 命令的对比

在这里插入图片描述

不推荐 yarn 和 npm 在一个项目中都使用，package-lock.json 和 yarn.lock有点差别。


cnpm工具

registry这个仓库是在国外的，所以我们有时下载的时候，会很慢，甚至有可能下载不下来，所以就需要设置国内提供的镜像（大概10分钟，跟新一次）

// 查看仓库地址
npm config get registry

//设置仓库地址
npm config set registry https://registry.npm.taobao.org

但是，npm这个工具仓库地址是国外的，那么就需要借助一个工具，来设置国内的地址

npm install -g cnpm
cnpm config get registry    // 查看
cnpm config set registry    // 设置

npm install -g cnpm --registry=https://registry.npm.taobao.org

npx工具

npx是npm5.2之后自带的一个命令。

  • npx的作用非常多，但是比较常见的是使用它来调用项目中的某个模块的命令

举例：

全局安装webpack 5.x.x

局部安装 webpack 3.x.x


如果在终端执行 webpack --version使用的哪个版本呢

  • 会显示 webpack5.x.x，就是全局的
  • 在当前目录中找不到webpack时，就会去电脑的环境变量里面去找，执行

局部命令的执行

方式一：在终端中使用命令（在项目的根目录下）

./node_modules/.bin/webpack --version

方式二：修改package.json中的scripts

"scripts": {
    "webpack": "webpack --version"
}

方式三： 使用npx

npx webpack --version

npx的原理非常简单，它会到当前目录的node_modules/.bin目录下查找对应的命令


npm 发布自己的包

  • 注册npm账号

  • 在终端中 输入命名

    npm login

    就需要填写用户名和密码

  • 修改package.json ，也就是版本号（不修改版本号，是不支持的（覆盖以前的版本）， 报错）

  • 发布到 npm registry 上

    npm publish

  • 更新仓库

    • 修改版本号（最好符合semver规范）
    • 重新发布

  • 删除发布的包

    npm unpublish

  • 发布过期的包

    npm deprecarte

一三四、npm、cnpm、yarn、pnpm、npx、nvm的区别
梅某某
05-30 1575
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中最新的版本。这就麻烦了，常常会出现同一个项
前端工程化＜npm、cnpm、yarn、npx、pnpm等包管理工具＞
m0_51431448的博客
10-25 2925
平时工作中，像npm、cnpm、yarn等一些工具都是经常经常用的，但可能对里面的一些细节都没太在意，所以这篇就来总结一下加深印象和理解。另外还有pnpm的原理及使用，以及它的优势
【NPM】详解yarn 、npm 、 npx 、 cnpm 、 pnpm等包管理工具及其差异
VT_馒头的博客
06-23 1754
yarn 、npm 、 npx 、 cnpm 、 pnpm等包管理工具主要用于帮助开发者高效地管理项目中的各种依赖库、框架、工具以及其他代码模块。这些工具通过自动化的方式处理依赖的下载、安装、更新和卸载，确保项目中使用的每个外部组件都处于正确的版本，并且能够协同工作，避免版本冲突。
包管理工具-npm-npx-yarn-cnpm
酒客的博客
01-03 8736
包管理工具解析 代码共享方案 我们已经学习了在JavaScript中可以通过模块化的方式将代码划分成一个个小的结构： 在以后的开发中我们就可以通过模块化的方式来封装自己的代码，并且封装成一个工具； 这个工具我们可以让同事通过导入的方式来使用，甚至你可以分享给世界各地的程序员来使用； 如果我们分享给世界上所有的程序员使用，有哪些方式呢？ 方式一：上传到GitHub上、其他程序员通过GitHub下载我们的代码手动的引用； 缺点是大家必须知道你的代码GitHub的地址，并且从GitHub上手动下载； 需要
深入剖析 Bazi MCP 服务器配置：从 npx 解析到 API 密钥安全
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
06-18 983
MCP 带来了一条介于 LLM 与外部世界之间的高速通道，而就是最轻量、最直观的接入姿势。npx负责零成本执行，-y提升自动化程度，引入通用框架，run触发即时模式，提供专业领域能力，--key与 UUID 则保障了身份验证与访问控制。把这些要素串联起来，你便拥有了一套可复制、可伸缩、具备企业级安全的 AI 技能模块。希望本文的拆解与示例能帮助你在自己的项目里迅速实践，并在全球化多模型协作的浪潮中占得先机。
npm cnpm yarn 和 npx的区别
Baron的技术blog
07-06 646
NPM npm 是一个node package installer commander tool。 在安装了node.js环境下可以通过npm i xxx 来安装你需要的node package到本地或者全局。 npm i webpack -G //全局安装，路径为 /usr/local/bin npm i webpack -S -D //本地安装, 安装路径为 ./node-modules/.bin/ NPX npx会在安装npm的时候一起安装到本地。npx有两个应用场景： 在没有安装package的情况
npm、cnpm、yarn、以及npx的区别
lixiaolong240035的博客
08-04 4306
npm cnpm yarn 和 npx的区别 <1>从功能上分: 所有的都是为了安装依赖(js代码库) <2>从结果上分: npm\cnpm\yarn 都会把依赖下载到node_modules中(本地开发环境) npx会先检测本地node_modules中是否有相关依赖,有则直接调用他的命令行,没有的话回去上一级的node_modlues中寻找,直到找到系统的node_mu...
node 包管理工具：npm、pnpm、cnpm、npx、yarn
热门推荐
freeking101的博客
11-20 4万+
node 包管理工具：npm、cnpm、pnpm、yarn、npx
管理工具npm与cnpm、npx、nvm、yarn、pnpm的区别
wwv的博客
02-09 1827
管理工具npm与cnpm、npx、nvm、yarn、pnpm的区别
centos7 yum 安装nodejs、npm、cnpm、pm2、yarn
metallovex的博客
07-17 3120
centos7 yum 安装nodejs、npm、cnpm、pm2、yarn一、环境准备1.1 查看系统环境x86_641.2 关闭防火墙和selinux1.2.1 关闭防火墙1.2.2 关闭selinux[root@localhost ~]# getenforce #查看selinux是否开启Enforcing #enforcing表示selinux开启的，
npm、npx以及yarn的区别
weixin_44734373的博客
08-11 615
npm npm 是 nodeJS的包管理工具。 允许用户从NPM服务器下载别人编写的第三方包到本地使用。 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。 npx npx 是 npm 5.2版本新增的命令，npx 会自动查找当前依赖包中的可执行文件，如果找不到，就会去环境变量里面的 PATH 里找。如果依然找不到，就会帮你安装！与npm相比，npx简化了npm的执行步骤。 yarn 参考 菜鸟教程-npm介绍 阮一峰-n
npm, npx, yarn 的区别
颠覆我的整个世界，只为摆正你的身影
02-22 7809
1，yarn 和 npm 的区别 yarn 和 npm 都是 node 软件包管理器， 1， yarn: 是同步执行所有任务，提高了性能， 而且如果你上一次安装过软件包，第二个会从缓存中获取， 2， npm: 是按照队列执行每一个package, 每一次都是从网络上下载，也就是说必须要等到当前 package 安装完成之后，才能继续后面的安装 "6.0.3", // 表示安装指定的6.0.3版本 "~6.0.3", // 表示安装6.0.X中最新的版本 "^6.0.3" // 表示安装6.X.X中
【前端】彻底搞懂 npm、npx、yarn
老梁的专栏
11-05 6270
彻底搞清楚 npm、npx、yarn 的区别，只要记住下面两条： npm 只负责安装 package，不负责执行，yarn 也是，但是比 npm 好用。 npx 不负责安装，只负责执行 package。 首先举个例子。 npm 安装某个 package 的命令如下： npm install some-package ​install​ 后面如果没有跟 -g 的话只能将依赖包安装在当前目录下，如同上面这条命令。 也就是说 some-package 的路径无法在环境变量 $PATH 中体现，.
一文搞懂pnpm、npm、yarn、npx
2401_87546826的博客
11-21 788
npm是 Node.js 的官方包管理器，也是全球使用最广泛的 JavaScript 包管理工具。它用于管理 JavaScript 项目的依赖包，可以通过命令行来安装、更新、卸载依赖包。默认情况下，npm通过文件管理项目的依赖，目录存放实际的依赖包。npm支持语义化版本控制（semver），确保项目依赖版本的兼容性。npm是 Node.js 的默认包管理工具，几乎每个 Node.js 项目都可以用npm来管理依赖。yarn是由 Facebook 发起的包管理工具，目的是解决npm。
包管理工具详解npm 、 yarn 、 cnpm 、 npx 、 pnpm
凉茶铺的博客
01-09 2441
简明扼要的概述了，包管理工具npm 、 yarn 、 cnpm 、 npx 、 pnpm
包管理工具详解npm 、 yarn 、 cnpm 、 npx 、 pnpm（2023）
我们好像在哪见过
08-10 4016
包管理工具详解npm 、 yarn 、 cnpm 、 npx 、 pnpm（2023）
nodejs包管理工具对比：npm、Yarn、cnpm、npx
大剑师兰特的GIS世界
05-10 2371
每种包管理工具各有侧重，npm作为Node.js的原生工具，是最基础且普遍的选择；Yarn在性能和稳定性上有所优化，特别是在大型项目中表现更佳；cnpm解决了特定地区的网络问题；npx则简化了命令行工具的使用流程。开发者可以根据自己的需求和环境选择合适的包管理工具。
前端工程化07-常见的包管理工具npm、yarn、cnpm、npx
沉睡的猫的博客
05-20 1591
npm包管理工具、在安装node的时候这个东西就已经安装过了，通过npm去管理包的时候这个时候回有一个配置文件叫做package.json,他是以json的方式来书写对应的一个配置文件，这个配置文件是可以添加特别多的一些字段的，每个字段字段是什么意思呢？学习一些核心的字段都是什么意思。另外如果我们想通过npm去安装我们对应的一个包的时候，我们需要使用这个命令，我们需要学习他的原理，到底是从缓存拿的还是从服务器拿的。还有一些别的包管理工具，比如yarn、cnpm、npx,yarn这个东西在早期的时候，有一点点
npm cnpm yarn pnpm nvm 安装和区别
最新发布
07-05
### npm npm 是 Node.js 的默认包管理器，用于安装、管理和共享 JavaScript 包。 - **安装方式**：npm 通常随 Node.js 一起安装。可以通过访问 [Node.js 官方网站](https://nodejs.org/) 下载并安装 Node.js，npm 将自动包含在内。 - **常用命令**： - `npm install <package-name>`：安装指定包。 - `npm install -g <package-name>`：全局安装指定包。 - `npm update <package-name>`：更新指定包。 - `npm uninstall <package-name>`：卸载指定包。 ### cnpm cnpm 是 npm 的镜像版本，专为中国用户设计，以提高下载速度。 - **安装方式**： - 使用 npm 安装 cnpm：`npm install -g cnpm` - **常用命令**： - `cnpm install <package-name>`：安装指定包。 - `cnpm install -g <package-name>`：全局安装指定包。 - `cnpm update <package-name>`：更新指定包。 - `cnpm uninstall <package-name>`：卸载指定包。 ### Yarn Yarn 是由 Facebook 开发的包管理器，旨在解决 npm 的性能和安全性问题。 - **安装方式**： - 使用 npm 安装 Yarn：`npm install -g yarn` - 或者使用独立安装脚本： ```bash curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list sudo apt-get update && sudo apt-get install yarn ``` - **常用命令**： - `yarn add <package-name>`：安装指定包。 - `yarn global add <package-name>`：全局安装指定包。 - `yarn upgrade <package-name>`：更新指定包。 - `yarn remove <package-name>`：卸载指定包。 ### pnpm pnpm 是一个快速、节省磁盘空间的包管理器，它通过硬链接和符号链接来共享依赖项。 - **安装方式**： - 使用 npm 安装 pnpm：`npm install -g pnpm` - 使用 npx 安装 pnpm：`npx pnpm add -g pnpm` - **常用命令**： - `pnpm add <package-name>`：安装指定包。 - `pnpm add -g <package-name>`：全局安装指定包。 - `pnpm update <package-name>`：更新指定包。 - `pnpm remove <package-name>`：卸载指定包。 ### nvm nvm（Node Version Manager）是一个用于管理多个 Node.js 版本的工具。 - **安装方式**： - 使用 curl 安装 nvm： ```bash curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash ``` - 或者使用 wget 安装 nvm： ```bash wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash ``` - 安装完成后，重新加载 shell 配置文件（如 `.bashrc` 或 `.zshrc`）：`source ~/.bashrc` - **常用命令**： - `nvm ls-remote`：列出所有可用的 Node.js 版本。 - `nvm install <version>`：安装指定版本的 Node.js。 - `nvm use <version>`：切换到指定版本的 Node.js。 - `nvm alias default <version>`：设置默认使用的 Node.js 版本。 ### 区别 1. **npm** 是 Node.js 的默认包管理器，功能全面但有时会遇到性能瓶颈，尤其是在中国用户群体中。 2. **cnpm** 是 npm 的镜像版本，专门为提高国内用户的下载速度而设计，使用方式与 npm 类似。 3. **Yarn** 提供了更快的安装速度和更好的依赖管理机制，支持并行下载和确定性安装。 4. **pnpm** 通过硬链接和符号链接技术，显著减少了磁盘空间占用，并且保持了与 npm 兼容的 API。 5. **nvm** 不是包管理器，而是用于管理不同版本 Node.js 的工具，允许在同一台机器上轻松切换不同的 Node.js 版本。 ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值