npm、yarn、cnpm、npx的详解

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

摘抄于coderwhy老师

包管理工具npm

简介：

npm: Node package Manager 称：node包管理器。
npm属于node的一个管理工具，所以需要先安装Node。
npm管理的包 https://www.npmjs.org/

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: https://semver.org/lang/zh-CN
npm semver: https://docs.npmjs.com/misc/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账号
- https://www.npmjs.org
在终端中输入命名

npm login

就需要填写用户名和密码
修改package.json ，也就是版本号（不修改版本号，是不支持的（覆盖以前的版本），报错）
发布到 npm registry 上

npm publish
更新仓库
- 修改版本号（最好符合semver规范）
- 重新发布
删除发布的包

npm unpublish
发布过期的包

npm deprecarte