一文搞懂npm、cnpm、yarn、pnpm、nvm、nrm


1.释义

|
| 释义 | 安装 |
| — | — | — |
| npm | odejs 包管理工具,管理 nodejs 第三方插件(源在国外) |

  • 直接安装nodejs 包(自带 npm,不需要单独安装 npm)
    |
    | cnpm | 中国版版本的 npm(国内源) |
  • npm install -g cnpm -registry=https://registry.npm.taobao.org
  • cnpm i *
    |
    | pnpm | npm 的升级版 |
  • npm install -g pnpm
  • pnpm i *
    |
    | yarn | npm 的替代品,弥补 npm 的缺点。速度更快 |
  • *npm install -g yarn *
  • yarn *
    |
    | nvm ** | **控制 nodejs 和 npm 版本 |
  • win:安装 **[nvm 安装包**](https://github.com/coreybutler/nvm-windows/releases)
  • nvm install 12.22.10
  • nvm ls
  • nvm use 16.14.0
    |
    | nrm | 控制 npm 的源 |
  • npm install nrm -g
  • nrm add km https://192.168.2.244:9637/
    |
    | | | |

2.关系

点击查看【processon】

3.详解

npm

#显示 node 版本
$ node -v

#显示当前npm的版本
$ npm -v

$ npm install npm -g #npm升级

$ npm install express -g   # 全局安装(模块安装到全局,要看 npm config prefix 的位置)
$ npm install express      # 本地安装(安装模块到项目目录下)
$ npm install --save express # 安装到生产依赖 (dependencies节点写入依赖)
$ npm install --save-dev express # 安装到开发依赖(devDependencies节点写入依赖)
$ npm uninstall express #卸载依赖

小 Tips: npm 安装 -D 和-S 的区别:

  1. -D (–save-dev)是在开发环境中协助开发需要使用的;
  2. -S (–save)是生产环境打包时需要的;
  3. 在 package.json 中 -D 在 devDependencies 对象中,-S 在 dependencies 对象中;
  4. devDependencies 节点下的模块是我们在开发时需要用的,使用 –save-dev 的形式安装。像这些模块是项目运行必备的,应该安装在 dependencies 节点下,所以我们应该使用 –save 的形式安装。

cnpm

npm 是 node 官方的包管理器。cnpm 是个中国版的 npm

#cnpm全局安装
$ npm install -g cnpm -registry=https://registry.npm.taobao.org

#显示当前cnpm的版本
$ cnpm -v

$ cnpm install express -g   # 全局安装(模块安装到全局,要看 npm config prefix 的位置)
$ cnpm install express      # 本地安装(安装模块到项目目录下),不在package.json中写入依赖
$ cnpm install -S express     # 安装到生产依赖 (dependencies节点写入依赖)
$ cnpm install -D express     # 安装到开发依赖(devDependencies节点写入依赖)
$ cnpm uninstall express      # 卸载依赖

yarn

# yarn全局安装
$ npm i -g yarn

#显示当前cnpm的版本
$ yarn -v

$ yarn global add express         # 全局安装
$ yarn add express                         # 安装到生产依赖 (dependencies节点写入依赖)
$ yarn add express --save-dev # 安装到开发依赖(devDependencies节点写入依赖)
$ yarn remove express                  # 卸载依赖

它的出现是为了弥补 npm 当时安装速度慢、依赖包版本不一致等问题。每个 yarn 安装都会生成一个类似于 npm-shrinkwrap.json 的 yarn.lock 文件,而且它是默认创建的。除了常规信息之外,yarn.lock 文件还包含要安装的内容的校验和,以确保使用的库的版本相同。yarn 无需互联网连接就能安装本地缓存的依赖项,它提供了离线模式。
image.png
“1.0.1”表示安装指定的 1.0.1 版本,“~ 1.0.1”表示安装 1.0.X 中最新的版本,“^1.0.1”表示安装 1.X.X 中最新的版本。

速度快

  1. 并行安装:npm 是按照队列依次安装每个 package,当前一个 package 安装完成之后,才能继续后面的安装。而 Yarn 是同步执行所有任务。
  2. 缓存:如果一个 package 之前已经安装过,yarn 会直接从缓存中获取,而不是重新下载。
  3. 版本统一:yarn 创新性的新增了 yarn.lock 文件,它是 yarn 在安装依赖包时,自动生成的一个文件,作用是记录 yarn 安装的每个 package 的版本,保证之后 install 时的版本一致。不过随着后来 npm 也新增了作用相同的 package-lock.json,这个优势已经不太明显
  4. 更简洁的输出:npm 的输出信息比较冗长。在执行 npm install 的时候,命令行里会不断地打印出所有被安装上的依赖。相比之下,Yarn 简洁太多:默认情况下,结合了 emoji 直观且直接地打印出必要的信息,也提供了一些命令供开发者查询额外的安装信息。
  5. 多注册来源处理:所有的依赖包,不管他被不同的库间接关联引用多少次,安装这个包时,只会从一个注册来源去装,要么是 npm 要么是 bower, 防止出现混乱不一致。

pnpm

pnpm,全称为 performant npm,意为高性能的 Node.js 包管理器,由 Zoltan Kochan 于 2017 年发布,具有速度快、节省磁盘空间的特点。
pnpm 采用了一种巧妙的方法,利用硬链接和符号链接来避免复制所有本地缓存源文件,同一个包 pnpm 只会安装一次,磁盘中只有一个地方写入,后面再次使用都会直接使 hardlink。即使一个包的不同版本,pnpm 也会极大程度地复用之前版本的代码。举个例子,比如 lodash 有 100 个文件,更新版本之后多了一个文件,那么磁盘当中并不会重新写入 101 个文件,而是保留原来的 100 个文件的 hardlink,仅仅写入那一个新增的文件。

# pnpm 全局安装
$ npm i -g pnpm

#显示当前cnpm的版本
$ pnpm -v

$ pnpm add express -g       # 全局安装(模块安装到全局,要看 npm config prefix 的位置)
$ pnpm add express          # 本地安装(安装模块到项目目录下,dependencies节点写入依赖)
$ pnpm add -D express       # 安装到开发依赖(devDependencies节点写入依赖)
$ pnpm remove express            # 卸载依赖

npm、yarn、pnpm 对比

- npm yarn pnpm
Install all npm install yarn pnpm install
Install npm install [package] yarn add [package] pnpm add [package]

|
| npm install [package] -D | yarn add [package] -D | pnpm add -D [package] |
|
| npm install [package] -g | yarn global add [package] | pnpm add -g [package] |
| Uninstall | npm uninstall [package] | yarn remove [package] | pnpm remove [package] |
| Update | npm update [package] | yarn upgrade [package] | pnpm update [package] |
| build | npm run build | yarn run build | pnpm run build |

nvm

Nvm 可以切换 node 与 npm 版本,在开发不同项目时,可能会用到不同的 node 与 npm 版本,所以使用 nvm 可以方便的在不同 node 与 npm 版本之间进行切换。

nvm 包下载:https://github.com/coreybutler/nvm-windows/releases

#nvm 常用命令
$ nvm install latest    #安装最新的 nodejs 版本
$ nvm install 11.12.0   #安装对应的 nodejs 版本
$ nvm uninstall 11.12.0 #卸载对应的 nodejs 版本
$ nvm list available    #列出所有可用的 nodejs 版本
$ nvm list              #查看 nvm 列出已经安装的 nodejs 版本
$ nvm use 11.12.0       #使用对应的 nodejs 版本

nrm

在使用 npm 的过程中,可能插件安装速度比较慢,我们可能会使用淘宝源对插件进行下载安装。或者在公司内部,有一些 私有的插件,需要使用公司的源才可以下载。这种情况,我们就需要设置不同的源来进行下载。每次手动设置相对比较麻烦。而 nrm 可以很好的解决这个问题。

# 全局安装 nrm
$ npm install nrm -g

$ nrm ls              # 查看所有配置好的源以及对应名称
$ nrm add company http://npm.xxx.cn # 添加源,company 是名称,可以自行命名,后面是源的 url 地址
$ nrm del company     # 删除源
$ nrm use company     # 切换源
$ nrm test [registry] # 测试源的速度,不加对应的 registry 名称,测试所有源的速度,添加对应的名称,比如 company,就是测试 company 对应的源的速度

手动设置 npm 源

npm config get registry # 查看 npm 当前源npm config set registry https://registry.npm.taobao.org/ # 设置 npm 源为淘宝npm install --registry=https://registry.npm.taobao.org # 使用特定源安装所有依赖的包npm install express --registry=https://registry.npm.taobao.org # 使用特定源安装express包

文章作者:   leader755
版权声明:   本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 leader755 !
评论
 上一篇
vue自定义底部居中固定栏 vue自定义底部居中固定栏
背景: 1.如上图是一个常见的后台管理系统的布局,右下区域为内容区域。 2.内容区域需要随着桌面的宽度变化而变化,位于内容区域最底部有一个保存和取消按钮。 3.不管内容区域宽度怎么变化,底部保存按钮区域需要固定到底部且保存按钮始终居中状态
2023-07-31
下一篇 
父组件向子组件传递一个组件 父组件向子组件传递一个组件
说明:封装多级 tab 栏的 keep-alive 缓存通用组件关键点:父组件向子组件传递值,对象,数组、函数,父组件还能向子组件传递一个组件。
2023-06-14
  目录