Node-包管理工具整套下载使用讲解(nvm、npm、yarn、cnpm、pnpm、nrm)

前言

• 包管理工具npm：
  • Node Package Manager，就是Node包管理器
  • 现在已经不仅仅是node的包管理器了，我们前端项目也都会用它来进行管理项目依赖的包
• 如何下载和安装npm工具
  • npm属于node的一个管理工具，所以我们需要先安装Node：https://nodejs.org/zh-cn
  • 安装Node的过程会自动安装npm工具，每个版本的node对应的npm版本不相同
  • 下载完node可以去网上搜索如何安装node，然后根据步骤一步一步进行配置，直至在cmd中输入node -v可以正常显示版本
  • 推荐：我们可以下载nvm：node版本管理工具，然后通过nvm来下载node，这样就不用配置node的一系列东西了，下载完成会自动配置好。并且我们以后工作，多个项目之间可能使用的node版本不同，这时候我们可以使用nvm下载相应的版本，然后可以方便的进行node版本之间的切换
    • 下载地址：https://github.com/coreybutler/nvm-windows/releases
    • 使用教程：https://zhuanlan.zhihu.com/p/337663452
• npm管理的包在哪查看
  • 可以在这里搜索查看到：https://www.npmjs.com/
  • 我们后面上传自己的库也会在这里找到
• npm管理的包存放在哪
  • 我们发布的包是存放到registry上面的，也就是npm下载包的仓库的地址
  • 仓库地址：https://registry.npmjs.org/

nvm

• 上面前言里提到过推荐，这里我们详细讲解以下如何使用
• nvm官网下载地址都是为Linux和Mac系统的，我这个windows电脑下载windows版本的。后面有讲如何安装。
• 讲node之前，我们先来学学nvm，在公司我们一般不会只有一个前台项目，而不同的项目之间，可能需要node的版本不一致，这时候你切换项目就需要删除原来的及环境变量等->下载需要的版本然后再配置环境变量，非常的麻烦，有了nvm之后，我们下载node版本，以及在多个版本之间切换就变得非常简单。
• nvm：node版本管理工具，有了它，我们可以很方便的管理node版本，在不同的版本之间切换自如。
• 切换不同项目不同node版本之间的步骤
  • 不用nvm：
    1. 删除之前的node及环境变量(打开控制台->程序->node->右击删除等操作)
    2. 打开node官网，找到指定版本，然后下载
    3. 下载完毕后配置环境变量，npm仓库等
  • 使用nvm：
    1. 不需要删除之前node程序
    2. 使用命令nvm install [node 版本号]安装指定版本的node
    3. 不需要配置环境变量(在下载nvm的时候已经指定过了)

1、安装nvm

• 下载地址(windows版本，也可以返回上一级选择最新版本)：https://github.com/coreybutler/nvm-windows/releases/tag/1.1.10

• 随便选择一个即可，选择上面的会更方便

  

• 然后就是基本无脑下一步(除了以下两个地方，指定路径地址)(由于本人下载过了，就从网上找的图片-.-)

  • 

2、nvm常用命令

• nvm常用命令有以下几个,以及还有一个nvm current：查看当前所使用的node版本/或者执行 node -v 命令查看 ：

  

• nvm命令很多，我下面只演示部分常用的命令

2.1、list

查看所有下载的node版本

nvm list # 查看安装过的node版本# 或nvm ls # 查看安装过的node版本nvm ls

2.2、install/uninstall

下载或卸载执行的node版本

我这里下载16.16.0版本和删除它来进行测试

使用nvm安装的node不需要再添加环境变量等配置了，nvm下载的时候会自动配置好它的环境变量

下载

nvm install 16.16.0nvm ls # 查看是否下载成功

卸载

nvm uninstall 16.16.0nvm ls # 查看是否卸载成功

2.3、use

使用其他版本的node，软件上的控制台可能执行完毕会报错，原因是没有权限，以管理员身份打开命令提示符，然后再次执行命令即可

nvm use 14.19.1

2.4、current

上面使用过了，这里就不再演示了。查看当前使用的node的版本号，和node -v结果一致

npm(详细)

通常，我们在项目根目录下，会创建一个名为package.json文件，然后npm会根据里面的配置依赖，来下载对应的依赖。

1、package.json

1.1、创建文件

创建文件有两种方式：

1. 手动创建文件，然后一个一个填写内容
2. 在控制台输入命令：npm init -y
   1. -y：代表全部为yes。表示我们全部使用默认配置，如果不写的话，我们会在控制台进行一个一个的输入配置，或使用默认的话需要按很多回车，可以自行尝试。
   2. 一般都会配置为默认的，然后如果需要修改的话，等生成出来，我们直接在文件中改即可

{"name": "npm-study","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC"}

1.2、常见属性配置

(1)、必须填写的属性：name、version

• **name：**是项目的名字
• **version：**是当前项目的版本号
  • 遵循sermver版本规范：x.y.z，后面会讲到
• **description：**是描述信息，很多时候是作为项目的基本描述；
• **author：**是作者相关信息(发布时用到)
• **license：**是开源协议(发布时用到)
  • 可以查看：百度百科-开源协议

(2)、private属性

• **private：**记录当前的项目是否时私有的
• 当值为true时，npm时不能发布它的，这个的用处时防止不小心把项目发布到仓库中，变为开源的

(3)、main属性

• 程序的主入口
  • 如果有main属性，实际上时找到对应的main属性来查找文件的；
  • 主入口名一般为index.js，也有命名为main.js的，都可以，只需要在package.json中设置即可
  • 比如axios包

(4)、scripts属性(重要)

• scripts属性用于配置一些脚本命令，以键值对的形式存在

• 配置后我们可以通过npm run key命令的key来执行这个命令

• npm start 和npm run start 命令区别

  • 它们是等价的
  • 对于常用的start、test、stop、restart可以省略掉run，直接通过npm start等方式运行

• 比如我这里要运行项目下src/index.js文件，需要在终端输入：node ./src/index.js命令

• 每次都输入，很麻烦，我就可以写在脚本中，然后执行npm run start 或 npm start，即可执行

修改前

index.js文件

function test1(){console.log("我是test1");}function test2(name){console.log("我是" + name);}test1()test2("张三")

终端

修改后

package.json中的scripts

"scripts": {"start": "node ./src/index.js"},

终端

(5)、dependencies属性(重要)

• dependencies属性是无论开发环境还是生产环境都需要依赖的包
• 通常是我们项目实际开发用到的库和模块：vue、element-ui、axios等等
• 与之对应的是devDependencies属性

(6)devDependencies属性(重要)

• 存放着在生产环境不需要的依赖：webpack、babel、eslint、sass-loder等等
• 这个时候我们会通过命令npm install xxxx --save-dev，将它们安装到devDependcies属性中

(7)、peerDependencies属性

• 还有一种项目依赖关系是对等依赖，就是你依赖的一个包，它必须是以另外一个宿主包为前提的
• 比如element ui，它是依赖于vue2的。

(8)、engines属性

• engines属性用于指定Node和NPM的版本号
• 在安装的过程中，会先检查对应的引擎版本，如果不符合就会报错;
• 事实上也可以指定所在的操作系统"os":["darwin","linux"]，只是很少会用到

(9)、browserslist属性

• 用于配置打包后的JavaScript浏览器的兼容情况
• 否则我们需要手动的添加polyfills来让支持某些语法;
• 也就是说它是为webpack等打包工具服务的一个属性

1.3、依赖的版本管理

我们的dependencies和devDependencies属性负责记录依赖的版本。

可以发现我们安装的依赖版本会有^2.0.3 或 ~2.0.3，这是什么意思呢，有什么区别

• npm的包通常需要遵从semver版本规范：
  • semver：https://semver.org/lang/zh-CN/
  • npm semver：https://www.npmjs.com/package/semver
• semver版本规范是：X.Y.Z
  • X主版本号(major)：当你做了不兼容的API修改(可能不会兼容之前的版本)
  • Y次版本号(minor)：当你做了向下兼容的功能新增(新功能增加，但是兼容之前的版本)
  • Z修订号(patch)：当你做了向下兼容的问题修正(没有新功能，修复了之前版本存在的bug)
• ^和~的区别
  • x.y.z：表示一个明确的版本号;每次npm install下载都会下载这个指定好的版本
  • ^x.y.z：表示x是保持不变的，y和z永远安装最新的版本
  • ~x.y.z：表示x和y保持不变，z永远安装最新的版本

2、npm install命令

• 安装npm包分两种情况：

  • 全局安装(global install)：npm install webpack -g
  • 项目(局部)安装(local install)：npm install webpack

• 全局安装

  • 全局安装是直接将某个包安装到全局，在所有项目中，皆可使用
  • 比如全局安装yarn：npm install yarn -g

• 注意

  • 通常我们会把工具包全局下载，比如：vue-cli、yarn、cnpm等
  • 而不是类似于：axios、element-ui等文件
  • 所以全局安装axios后，并不能让我们在所有项目中使用axios库

• 项目安装会在当前目录下生成一个node_modules文件夹。

• 局部安装分为开发依赖和生产依赖

  • 默认安装开发和生产依赖

    npm install axios --save # 最全写法npm install axios# --save可以省略npm i axios # install 可以简写为 inpm i axios@1.3.4 # 安装版本为1.3.4的axios

  • 安装开发依赖

    npm install webpack --save-dev # 最全写法npm install webpack -D# --save-dev可以简写为-Dnpm i webpack -D # 最简单写法

  • 根据package.json配置文件来安装所有依赖

    npm installnpm i

3、package-lock.json

• 我们在执行npm install命令的时候，会自动生产package-lock.json文件

• 从npm 5.x开始，执行npm install时会自动生成一个package-lock.json 文件。

• npm为了让开发者在安全的前提下使用最新的依赖包，在package.json中通常做了锁定大版本的操作，这样在每次npm install的时候都会拉取依赖包大版本下的最新的版本。这种机制最大的一个缺点就是当有依赖包有小版本更新时，可能会出现协同开发者的依赖包不一致的问题。

具体用处，会在下一小节详细讲解

3.1、文件解析

• name：项目的名称
• version：项目的版本
• lockfileVersion：lock文件的版本
• requires：使用requires来跟踪模块的依赖关系
• dependencies：项目的依赖
  • 当前项目依赖axios，但是axios依赖follow-redireacts
  • axios中的属性如下
    • version：表示实际安装的axios版本
    • resolved：用来记录下载的地址，registry仓库中的位置
    • requires/dependencies：记录当前模块的依赖
    • integrity：用来从缓存中获取索引，再通过索引去获取压缩包文件

4、npm install原理

看完上面的使用讲解，我们应该深入考虑几个问题

• 执行 npm install它背后帮助我们完成了什么操作
• 我们会发现还有一个称之为package-lock.json的文件，它的作用是什么
• npm5开始，npm支持缓存策略(来自yarn)的压力，缓存有什么用

npm install 原理图

• 没有lock文件
  • 分析构建依赖关系，因为我们的包会依赖其他的包，并且多个包之间会产生相同依赖的情况
  • 从registry仓库中下载压缩包(如果设置了镜像，那么就会从镜像服务器中下载压缩包)
  • 获取到压缩包后会对压缩包进行缓存(npm5开始有的)
  • 将压缩包解压到项目的node_modules文件中
• 有lock文件
  • 检测lock中包的版本是否和package.json中的一致
    • 不一致，就会重新构建依赖关系，走上面的流程
    • 一致的情况，会去有限查找缓存
      • 没有找到，就会从registry仓库上下载，然后接着走上面的流程
      • 找到，会获取缓存中的压缩文件，并且将压缩文件解压到node_modules文件夹中

5、npm其他命令

以下几个为比较常用的命令

• 卸载某个依赖包

  npm uninstall package # 卸载生产和开发依赖中指定的包npm uninstall package --save-dev # 卸载开发依赖中指定的包npm uninstall package -D # 卸载开发依赖中指定的包 简写npm uni package # 卸载生产和开发依赖中指定的包 简写

• 强制重新build

  npm rebuild

• 清除缓存

  npm cache clean --force

• npm命令官网：https://docs.npmjs.com/cli/v9/commands/

yarn

另一个node包管理工具 yarn

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

• yarn是为了弥补 早期npm的一些缺陷而出现的

• 早期的npm存在很多的缺陷，比如安装依赖速度很慢、版本依赖混乱等等一系列问题

• 虽然从npm5版本开始，进行了很多的升级和改进，但是依旧很多人喜欢用yarn

• 执行 yarn install命令，也会对应的生成yarn.lock文件，作用和package-lock.json一致

• 部分命令进行了修改，命令对照如下

  NPM	YARN
  npm install	yarn install
  npm install [package]	yarn add [package]
  npm install –save [package]	yarn add [package]
  npm install –save-dev [package]	yarn add [package] [-dev/-D]
  npm install [package@x.y.z]	yarn add [package@x.y.z]
  npm i -g [package]	yarn global add [package]
  npm rebuild	yarn install -force
  npm uninstall [package]	yarn remove [package]
  npm uninstall –save [package]	yarn remove [package]
  npm uninstall –save-dev [package]	yarn remove [package]
  npm uninstall –save-optional [package]	yarn remove [package]
  npm cache clean –force	yarn cache clean –force
  rm -rf node_modules && npm install	yarn upgrade –latest

  • yarn upgrade 用于更新包到基于规范范围的最新版本

  • yarn upgrade –latest # 忽略版本规则，升级到最新版本，并且更新 package.json

cnpm

由于npm或yarn默认仓库的地址为国外的，可能会导致：下载会比较慢，或者下载途中某些文件丢失等问题，我们一般会将仓库地址改为淘宝的镜像仓库地址。

• 淘宝镜像仓库官网(和npm查找依赖一样)：https://npmmirror.com/
• 淘宝镜像仓库地址每隔10分钟就会同步一次官方资源

将npm仓库改为淘宝的问题：

• 假如某天淘宝镜像不好用了，你想改回来，就需要搜索原来镜像仓库的地址，然后再执行npm config registry xxxx改回来，比较麻烦
• 由于淘宝镜像每隔10分钟才会同步一次官方资源，会有延迟，所以会导致包的版本可能不是最新的

为了解决以上问题，我们会再下载一个cnpm。

• cnpm和npm使用基本一致，就是命令前面的npm改为了cnpm
• 我们只需要修改cnpm的仓库地址即可
• 使用淘宝镜像的时候执行cnpm install [package]
• 使用官方镜像的时候执行npm install [package]

1、下载方式

两种方式

• 一种是在下载cnpm的时候顺便修改仓库地址

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

• 另外一种是先下载cnpm，然后再修改地址

  npm i cnpm -gnpm config set registry=https://registry.npm.taobao.org

npx

npx 用于在项目目录中，直接执行依赖包中的命令，比如less的命令、webpack的命令等等

1、讲解

• 下载的所有的依赖中包含的命令，全部在node_module->.bin目录下。
• 当你在项目目录中执行webpack -v的时候，会从你当前项目目录中找命令，并不会智能的去子目录中找
• 当在子目录中找不到的时候，就会去全局查找(我们使用npm安装的时候，后面 -g 的命令)
• 当全局和局部都安装了相同的包时，在当前项目下执行命令yarn -v，就会执行全局版本的命令。但是当进入.bin目录后，再次执行命令，还是执行全局版本的命令。
• 只有执行npx yarn -v的时候，才会执行局部版本的命令
• 所以当你想执行依赖包中的命令的时候有以下办法
• 下载webpack的时候，也需要同时安装webpack-cli才能执行命令，否则会报错提示安装
• yarn add webpack webpack-cli -D

2、执行依赖包中的命令的方式

执行命令共有三种方法，第三种也是最简单的一种

1. 每次执行命令进入到node_modules->.bin目录中执行.\webpack -v命令 (最麻烦不推荐)
2. 可以在script脚本中写"webpackV"："webpack -v"，在这里可以省略npx，但是如果执行的命令多的话，就需要定义很多脚本，也很麻烦 (不推荐使用)
3. 最简单的办法就是直接在项目目录下，执行npx webpack -v命令，这样就会自己去node_modules->.bin目录中寻找 (非常推荐)

2.1、错误示例

2.2、方法一

cd .\node_modules\.bin.\webpack -v

2.3、方法二

package.json中的scripts

"scripts": {"start": "node ./src/index.js","webpackV": "webpack -v"},

命令

npm run webpackV

2.4、方法三

npx webpack -v

上传自己的包

发布包步骤

1. 上传自己的包，首先我们要注册一个npm的账号，官网：https://www.npmjs.com/
2. 然后在index.js中随便写几个方法，用于上传包后测试
3. 然后查看package.json文件中是否有private属性，改为false，还有其他的配置
4. 然后在命令行中登录npm login
5. 执行命令npm publish，然后等待完成即可将包上传成功
6. 这时候打开npm包查看官网：https://www.npmjs.com/，然后搜索自己在package.json中定义的name名，即项目名即可搜索到
7. 然后再创建一个新的目录，初始化，然后下载安装咱们刚刚提交好的包，js中引入，查看是否能使用即可
8. 注意：我们一般会把项目使用打包工具，比如webpack，打包后再进行发布，这样可以让使用的人下载的时候，更快一些，减小包的体积

更新包步骤

1. 修改代码
2. 修改package.json中的版本号
3. 重新发布

1、发布包

注意：index.js最外层的文件，要放到根目录下，而不是src里面

1.1、index.js中测试方法

export function test1(val){return "我是test1方法，您的传参为：" + val;}export function sum(val1,val2){return val1 + val2;}

1.2、修改属性

keywords：可以通过关键字搜索到

type：让我们项目使用ES6的导包规范，而不是commonJS

{"name": "npm-demo-01-tcc","version": "1.0.0","description": "","main": "index.js","private": false, "type": "module","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": ["tccc","ycccc"],"author": "宇辰","license": "ISC"}

1.3、命令行中登录

npm login

1.4、上传包

npm publish

1.5、测试

这时候，我们就上传成功啦

仓库搜索

代码测试

1. 新创建一个项目，然后初始化，执行命令npm i npm-demo-01-tcc下载依赖
2. 然后js文件引入依赖，调用依赖中的方法，进行测试

package.json

{"name": "npm-demo-02","version": "1.0.0","description": "","main": "index.js","type": "module","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC","dependencies": {"npm-demo-01-tcc": "^1.0.0"}}

index.js

import {test1, sum} from "npm-demo-01-tcc";console.log(test1(123456));console.log(sum(100,200))

打印

2、更新包

2.1、修改代码

export function test1(val){return "我是test1方法，您的传参为：" + val;}export function sum(val1,val2){return val1 + val2;}export function sub(val1,val2){return val1 - val2;}

2.2、修改版本号

{"name": "npm-demo-01-tcc","version": "1.1.0","description": "","main": "index.js","type": "module","private": false,"scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": ["tccc","ycccc"],"author": "宇辰","license": "ISC"}

2.3、重新上传

重新上传需要进入到包的项目目录里，执行命令

npm publish

2.4、测试

• 新项目中需要删除node_module目录，并且删除package.json中的这个依赖，然后重新install。

• 或者直接修改package.json中的那个依赖的版本号，然后install(命令地址需要在新项目中)。

• 我们可以在node-modules中看到自己的源码

import {test1, sum, sub} from "npm-demo-01-tcc";console.log(test1(123456));console.log(sum(100,200))console.log(sub(200,100))

3、卸载包

共有两个命令

• npm unpublish [package@xxx] –force：删除发布的包，24小时内不能再发布同样名称的包
• npm deprecate：让发布的包过期

pnpm(新东西)

• 官网地址：https://pnpm.io/zh/
• 什么是pnpm？官方解释
  • pnpm：我们可以理解成是performant npm缩写，意为：高效的npm
• 特点：
  • 

• 出现原因
  1. 如果工作的话，你的笔记本上，不可能只有一个前台项目，那么每个项目都需要安装node_modules依赖，如果你有100个项目，就会装一百个，并且里面很多依赖都相同，非常占用空间资源
  2. 每个新项目下载资源也会非常的耗费时间
  3. npm5和yarn为了解决依赖的依赖和其他依赖的依赖重复问题，使用了扁平化安装依赖。比如：我们安装axios的时候，可以看到node_modules中多了很多依赖包，这些依赖包都是axios依赖中所拥有的依赖，它们在npm5版本之前，是会存到各自文件的node_modules中，但是这样又无法解决一个依赖的依赖和另一个依赖的依赖是一个版本，但是却被下载了两份的问题。所以后面改成和yarn一样，对node_modules进行了扁平化管理。
  4. 上面这样的坏处是，由于依赖的依赖被拉出来了，导致我的项目中也能使用这个依赖。但是我的package.json并没有记录这个依赖。假如有一天axios被删除了，那么它的依赖也会跟着删除。如果我项目中使用了这个依赖，就会报错。这样的以来问题称之为：幽灵依赖
• pnpm优点
  • pnpm使用操作系统中的软连接/硬链接就解决了上面这几个问题，所以最近非常的火
  • vue源码和其他大型开源项目也都换成了pnpm

在下载使用之前，先来讲一讲操作系统中的软连接和硬链接(pnpm实现的核心原理)

1、软连接和硬链接

• 软连接和硬链接是操作系统中的概念
• ==软连接(符号连接)：==就是指你电脑桌面上的快捷方式，它本身只会占用很小很小的内存，但是它的文件属性上，会绑定源文件的地址，当你双击它的时候，实际上就是点击的源文件中它指向的文件(启动器，一般后缀为.exe)的文件，不可编辑的！
  • 

• 硬链接：你下载的软件，其实它真正存放的并不是操作系统中，而是在你的磁盘中，只不过操作系统通过计算，来让界面显示出来图标和文件，你点击它，它就会去磁盘里找真正的数据。真正的数据只有一份，但是我们却可以通过设置，让两个文件同时指向内存中的源数据，这样就可以做到，两边任意一边修改文件内容，都会导致磁盘里的数据被修改，进而两边显示的数据也会做到同时修改，当删除其中一个文件的时候，另外一个文件依旧可以对数据进行修改。

1.1、拷贝和硬链接的区别

• 拷贝不仅会在界面上拷贝出一个文件显示出来，也会在硬盘中把源数据也拷贝一份，各自指向各自的源数据，互不影响，互不干扰。
• 硬链接则不同，两个文件会同时指向硬盘中的同一处数据地址，当两个文件中任意一个进行修改，都会修改到硬盘中的源文件，进而导致两边文件的数据会同时修改，删除其中一个文件另外的文件依旧可以对数据进行访问修改。
• ==注意：==硬链接只能作用在文件上，不能作用在文件夹上！！！

1.1.1、拷贝

1.1.2、硬链接

2、文件拷贝和硬链接和符号连接命令

文件的拷贝，可以使用ctrl+c ctrl+v，也可以使用命令，进行文件的拷贝

#windowscopy index.js index2.js#macoscp index.js index2.js

当修改index.js文件的时候，并不影响index2.js

文件的硬链接，使用命令吧

• /H：创建硬链接而非符号连接

  

• index2.js：创建的文件名称(想要创建的文件)

• index.js：被链接的文件名(已存在的文件)

#windowsmklink /H index2.js index.js#macosln index2.js index.js

文件的软连接

• 需要权限，所以我们不能在idea中使用命令执行了，需要搜索cmd，然后以管理员身份运行，即可

  

• 然后进入当前测试文件的目录中

  

#windowsmklink index2.js index.js#macosln -s index2.js index.js

然后进到目录中，可以看到两个文件类型不一致，但是点击index2.js后，打开的文件和index.js内容一致

我们右击index2.js，有个打开文件位置的选项，点击，即可发现会默认选中到index.js文件

2、下载pnpm

下载的方式有很多种，可以查看官网：https://pnpm.io/zh/installation

我们这里使用 npm 来进行安装

• 如果yarn下载成功后，执行pnpm -v命令依旧报错。是因为yarn没有配置环境变量，需要执行yarn global bin，找到yarn所在目录，然后把这个目录配置到系统的path环境变量中即可
• 建议直接使用npm，简单省事

# npm命令npm install -g pnpm# yarn命令yarn global add pnpm

3、使用pnpm命令

• pnpm命令查看官网：https://pnpm.io/zh/cli/exec

我们新创建一个项目来测试使用，里面新建一个index.js文件，作为主文件

3.1、init

当我们执行命令的时候，pmpn会直接给我们创建一个package.json文件，里面内容和npm的生成的一致，不过我们可以省略-y不写

pnpm init

3.2、add/remove

add：添加指定依赖

remove：删除指定依赖

add

pnpm add axios # 开发和生产依赖pnpm add -D axios # 开发依赖pnpm add -g yarn # 全局依赖pnpm add axios@x.y.z #安装指定版本依赖

remove

pnpm remove [-D|-g] axios

3.3、install

需要先在package.json文件中添加几个依赖，才能根据添加的依赖进行下载

package.json

{"name": "pnpm-demo-03","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC","dependencies": {"axios": "^1.3.4"},"devDependencies": {"webpack": "^5.76.3 ","webpack-cli": "^5.0.1"}}

pnpm installpnpm i # 简写

3.4、run

• 执行script脚本，只有在命名为npm指定名称时，才能省略run，直接执行npm 命令

  

• 但是pnpm和yarn一样，run可以省略，不管是不是指定名称的命令，都可以省略run

  

4、node_modules讲解

• 打开node_modules目录，你会发现它和使用其他npm、yarn下载后的目录不一致，一级目录里只能看到自己下载的依赖，并没有看到依赖的依赖在一级目录，这样就限制了你可以使用依赖的依赖来进行代码编写，解决了幽灵依赖的问题

• 使用vscode软件，可以看到一级目录最右侧都是有个箭头，代表了这些目录都是软连接，它并不是真正的文件存放地址，而是一个指针，指向了真实存放文件的地址

  

• 其实所有的依赖也都被扁平化了(不太准确)，只不过她们都放在.pnpm的文件夹里(二级目录)。

• 二级目录中可以找到所有依赖以及依赖的依赖(被扁平化都放在二级目录了)

• 但是打开axios的依赖，可以发现，它自己的依赖是正常的文件夹，而它自身的其它依赖都是软连接，指向了被扁平化的依赖

• 我这里删除一些文件夹，方便看得清楚，画幅图

  

5、存储store

• store里面是用某种算法算出来的文件，然后和node_modules中的真实文件建立了硬链接。

• pnpm7.0之前，存储store的位置在c盘 -> 用户 -> tcc -> .pnpm-store中，后来考虑到有的电脑是两个盘，c盘为固态，其他盘为机械，依赖存到C盘中，代码存到机械盘中，就会有问题——不同的盘符直接不可以建立硬链接，数据不可能只存在一份。所以7.0版本后，地址改为了代码当前所在的盘符中(比如为D盘)D:\.pnpm-store中。

• 想要查找store的位置，也可以使用命令pnpm store path

  

• 另外一个非常重要的命令是pnpm store prune：从store中删除当前未被引用的包来释放store的空间

6、下载速度测试

你可以创建两个测试项目

• demo1先下载webpack3.6.0的版本，你会发现时间虽然可能比其他npm、yarn下载的时间短了一点，但是也没有太明显。

  

• 然后你在demo2中再下载webpack最新版本，你就会发现，这次的时间明显比第一次下载的速度慢了一倍两倍多。

  

• 上面写的是这么就，我感觉没有这么久，第二次我感觉用了10秒九下载好了

nrm

• 最后一个东西为拓展，是一个镜像管理工具，言外之意就是用来管理所有镜像地址的的工具。

• 之前说为了切换镜像仓库方便，又下载了一个cnpm，然后切换cnpm的镜像即可。如果有多个源来回切换的话，依旧很麻烦。

• 所以我们使用nrm来管理自己的源，就可以不下载cnpm，下载一个nrm管理所有源即可

1、全局安装

上面讲了很多常用工具了，我这里只写了使用npm来全局安装，这样会简单一些==(不需要把其他对应的工具来添加到环境变量，才能正常访问使用别的工具全局安装的工具了)==。

npm i -g nrm@1.0.0 # 下载这个版本之上的可能会有 require() of ES Module 报错，这个版本是没有问题的nrm --version # 查看版本

2、常用命令

• add/del：添加/删除一个源
• nrm ls：查看所有下载的镜像源
• nrm use ：使用指定的源
• nrm test [源name]：需要执行一会时间，测试指定的源速度或所有源的速度

2.1、add/del

nrm add taobao https://registry.npm.taobao.org/ # 添加淘宝镜像nrm add cnpmjs https://registry.nlark.com/ # cnpmjs镜像nrm add huawei https://mirrors.huaweicloud.com/repository/npm/ # 华为云镜像nrm add tengxun https://mirrors.cloud.tencent.com/npm/ # 腾讯云镜像

2.2、ls

nrm ls

2.3、use

npm config get registry # 先查看npm的仓库地址nrm use taobao # 然后通过nrm修改地址npm config get registry # 再查看npm的仓库地址，查看是否改变# 前面有错号小图标的不用管

2.4、test

nrm test