npm，yarn，cnpm，npx，pnpm包管理工具详解

代码共享方案：

上传到Github等代码托管平台

使用一个专业的工具来管理我们的代码（我们通过工具将代码发布到特定的位置，其他程序员直接通过工具来安装、升级、删除我们的工具代码）

1 npm

1.1 npm的配置文件

package.json

文件生成的方式：

手动从零创建项目，npm init -y
通过脚手架创建项目，脚手架会帮助我们生成package.json，并且里面有相关的配置

1 2	npm init # 会有选择的选项 npm init -y # 直接生成默认的package.json文件，省去了敲回车的步骤

1.2 常见的属性

name：项目的名称（必填）

version：当前项目的版本号（必填）

description：描述信息，常作为项目的基本描述

author：作者相关信息（发布时用到）

license：开源协议（发布时用到）

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

main：设置程序的入口

scripts：用于配置一些脚本命令，以键值对的形式存在。配置后我们可以通过npm run命令的key执行这个命令，对于常用的start、test、stop、restart可以省略掉run直接通过npm start等方式运行

dependencies：指定无论开发环境还是生成环境都需要依赖的包，通常是我们项目实际开发用到的一些库模块vue、vuex、vue-router、react、react-dom、axios等等

devDependencies：仅在开发环境中需要依赖的包，比如webpack、babel等。我们可以通过npm install webpack --save-dev，将它安装到devDependencies中

peerDependencies：对等依赖，即依赖的一个包，它必须是以另外一个宿主包为前提的，例如element-plus是依赖于vue的，ant design是依赖于react、react-dom

engines：用于指定Node和NPM的版本号，在安装的过程中，会先检查对应的引擎版本，如果不符合就会报错

browerslist：用于配置打包后JavaScript浏览器的兼容情况（webpack等打包工具的一个属性）

依赖的版本管理：

npm的包通常需要遵从semver版本规范X.Y.Z：

X主版本号：当你做了不兼容的API修改（可能不兼容之前的版本）

Y次版本号：当你做了向下兼容的功能性新增（新功能增加，但是兼容之前的版本）

Z修订号：当你做了向下兼容的问题修正（没有新功能，修复了之前版本的bug）

x.y.z：表示一个明确的版本号

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

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

1.3 npm install

全局安装：npm install webpack -g，一般为工具包

局部安装：npm install webpack

# 默认安装开发和生成依赖
npm install axios
npm i axios

# 开发依赖
npm install webpack --save-dev
npm install webpack -D
npm i webpack -D

# 根据package.json中的依赖包
npm install

1.4 package-lock.json

从npm5开始，npm支持缓存策略

属性

name：项目名称

version：项目的版本

lockfileVersion：lock文件的版本

requires：使用requires来跟踪模块的依赖关系

dependencies：项目的依赖

version：实际安装依赖的版本
resolved：用来记录下载的地址，registry仓库中的位置
requires/dependencies记录当前模块的依赖
integrity用来从缓存中获取索引，再通过索引去获取压缩包文件

1.5 npm其他常用命令

# 卸载某个依赖包
npm uninstall package
npm uninstall package --save-dev
npm uninstall package -D

# 强制重新build
npm rebuild

# 清理缓存
npm cache clean

更多命令见官网：https://docs.npmjs.com/cli-documentation/cli

2 yarn

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

3 cnpm

# 查看npm镜像
npm config get registry # npm config get registry

# 我们可以直接设置npm的镜像（淘宝镜像）
npm config set registry https://registry.npm.taobao.org

但对于大多数人来说，并不希望直接将npm镜像修改了，这个时候我们可以使用cnpm

1 2	npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm config get registry # https://r.npm.taobao.org/

4 npx

npx是npm5.2之后自带的一个命令，常用它来调用项目中的某个模块的指令

使用局部依赖版本而非全局

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

./node_modules/.bin/webpack --version

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

1
2
3

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

方法三：使用npx

1	npx webpack --version

原理：到当前目录的node_modules/.bin目录下查找对应的命令

5 pnpm

5.1 硬链接和软链接

这个概念linux课程中也有提到过

硬链接：电脑文件系统中的多个文件平等地共享同一个文件存储单元，删除一个文件名字后，还可以用其它名字继续访问该文件

软链接（符号链接，相对于windows的快捷方式）：是一类特殊的文件，其包含一条以绝对路径或相对路径的形式指向其他文件或者目录的引用

5.2 pnpm的原理

同一依赖包使用相同的版本，磁盘上只移这个依赖包的一份文件；同一依赖包使用不同的版本，只有版本之间不同的文件会被存储起来；所有文件都保存在硬盘的统一位置，当安装软件包时，其包含的所有文件都会硬链接到此位置，而不会占用额外的因公安空间，方便在项目之间共享相同版本的依赖包

因此，pnpm更快速，更高效，更严格，支持monorepos

5.3 pnpm的安装和使用

pnpm的官网：https://pnpm.io/zh/

npm install -g pnpm

存储位置：store

# 获取当前活跃的store目录
pnpm store path

# 删除当前未被引用的包来释放store的空间
pnpm store prune