Node包管理工具 - nvm、npm、yarn、cnpm、pnpm

转载说明

简介

nvm : 可以实现一台电脑，拥有多个版本的Node

npm : node package manager 下载Node后自带的一个包管理工具

yarn : npm 的升级版，更优秀

cnpm : 配置下载非官方地址的依赖（淘宝、华为、腾讯镜像）

pnpm : performant node package manager 更优秀的npm包管理工具

nrm：下载镜像地址管理工具

`nvm`

参见使用 nvm 实现对 Node 的多版本管理

`npm`

Node Package Manager，就是Node包管理器

npm属于node的一个管理工具，所以我们需要先安装Node：https://nodejs.cn/

安装Node的过程会自动安装npm工具，每个版本的node对应的npm版本不相同

使用`npm`初始化一个文件夹

手动创建package.json文件
使用命令npm init -y（-y表示yes，使用默认的配置）

属性配置：

javascript 复制代码

{
  "name": "project",// 项目名字
  "private": true,// 当前项目是否私有，当值为true时，npm时不能发布它的
  // 这个的用处时防止不小心把项目发布到仓库中，变为开源的
  "version": "0.0.0",
  "type": "module",// 模块化规范，export/import
  "scripts": {
  // 配置一些脚本命令（重要）；可以通过npm run key的方式运行脚本
    "dev": "vite --open",
    "build": "vue-tsc && vite build",
    ......
  },
  "dependencies": {// 开发环境和生产环境都需要的依赖
    "@element-plus/icons-vue": "^2.3.1",
    "axios": "^1.6.2",
    ......
  },
  "devDependencies": {// 开发环境需要的依赖
    "@babel/eslint-parser": "^7.23.3",
    "@commitlint/cli": "^18.4.3",
    ......
  }
}

依赖的版本管理

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

semver：https://semver.org/lang/zh-CN/

npm semver：https://www.npmjs.com/package/semver

html 复制代码

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永远安装最新的版本

`npm install` 命令

包的安装：

局部安装：npm install axios

全局安装：npm install yarn -g

通常全局下载的包：vue-cli、yarn、cnpm

html 复制代码

npm install axios --save(完整写法 --save 可以省略)
npm i axios(简写)
npm i axios@1.6.2(指定版本安装)

npm install webpack --save-dev(安装开发依赖完整写法)
npm i webpack -D(简写)

强制重建
npm rebuild
清除本地缓存
npm cache clean --force

npm 5.x之后安装依赖会自动产生一个package-lock.json

存放有依赖包的依赖关系

html 复制代码

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

`yarn`

yarn 的出现是为了解决早期npm存在的一些问题（安装依赖速度很慢、版本依赖混乱等等一系列问题）

但npm 5.x版本之后有了很大的升级和改进
详细参考

`cnpm`

cnpm 和 npm用法一致，可在npm的基础上配置另一个镜像仓库地址来下载依赖

配置方法参考npm的

`npx`

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

html 复制代码

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

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

`pnpm`

pnpm ：官方给的解释是performant npm(性能更好的npm)

特点

出现背景：

你的电脑可能有好几个前端项目，每个项目都有各自的依赖包，存放在mode_modules中，但不同的项目中可能会有多个相同的依赖，也就是说同一份依赖在你的电脑中存在于几个web项目中。这样显然是很占用资源的！
每个新项目下载资源也会非常的耗费时间
npm5和yarn为了解决依赖的依赖和其他依赖的依赖重复问题，使用了扁平化安装依赖。比如：我们安装axios的时候，可以看到node_modules中多了很多依赖包，这些依赖包都是axios依赖中所拥有的依赖，它们在npm5版本之前，是会存到各自文件的node_modules中，但是这样又无法解决一个依赖的依赖和另一个依赖的依赖是一个版本，但是却被下载了两份的问题。所以后面改成和yarn一样，对node_modules进行了扁平化管理。
上面这样的坏处是，由于依赖的依赖被拉出来了，导致我的项目中也能使用这个依赖。但是我的package.json并没有记录这个依赖。假如有一天axios被删除了，那么它的依赖也会跟着删除。如果我项目中使用了这个依赖，就会报错。这样的以来问题称之为：幽灵依赖

pnpm应运而生

pnpm使用操作系统中的软连接/硬链接就解决了上面这几个问题

pnpm下载

通过npm下载：npm i pnpm -g
pnpm init 初始化文件夹（对，-y可以省略）
pnpm命令查看官网

Node包管理工具 - nvm、npm、yarn、cnpm、pnpm

转载说明

简介

nvm

npm

使用npm初始化一个文件夹

属性配置：

依赖的版本管理

npm install 命令

yarn

cnpm

npx

pnpm

出现背景：

pnpm下载

`nvm`

`npm`

使用`npm`初始化一个文件夹

`npm install` 命令

`yarn`

`cnpm`

`npx`

`pnpm`