包管理工具详解 npm、yarn、cnpm、npx

代码共享方案

我们已经学习了在JavaScript中可以通过模块化的方式将代码划分成一个个小的结构，在以后的开发中我们就可以通过模块化的方式来封装自己的代码，并且封装成一个工具。

这个工具我们可以让同事通过导入的方式来使用，甚至你可以分享给世界各地的程序员来使用，如果我们分享给世界上所有的程序员使用，有哪些方式呢？

1. 方式一：上传到GitHub上、其他程序员通过GitHub下载我们的代码手动的引用；

• 缺点是大家必须知道你的代码GitHub的地址，并且从GitHub上手动下载；
• 需要在自己的项目中手动的引用，并且管理相关的依赖；
• 不需要使用的时候，需要手动来删除相关的依赖；
• 当遇到版本升级或者切换时，需要重复上面的操作；

显然，上面的方式是有效的，但是这种传统的方式非常麻烦，并且容易出错。

2. 方式二：使用一个专业的工具来管理我们的代码

• 我们通过工具将代码发布到特定的位置；
• 其他程序员直接通过工具来安装、升级、删除我们的工具代码；

显然，通过第二种方式我们可以更好的管理自己的工具包，其他人也可以更好的使用我们的工具包。

包管理工具npm

包管理工具，npm：Node Package Manager，也就是Node包管理器；但是目前已经不仅仅是Node包管理器了，在前端项目中我们也在使用它来管理依赖的包；比如vue、vue-router、vuex、express、koa、react、react-dom、axios、babel、webpack等等；

• 如何下载npm工具呢？

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

• npm管理的包可以在哪里查看、搜索呢？

www.npmjs.org/ ，这是我们安装相关的npm包的官网；

• npm管理的包存放在哪里呢？

我们发布自己的包其实是发布到registry上面的，当我们安装一个包时其实是从registry上面下载的包。

npm的配置文件

那么对于一个项目来说，我们如何使用npm来管理这么多包呢？

事实上，我们每一个项目都会有一个对应的配置文件，无论是前端项目（Vue、React）还是后端项目（Node）这个配置文件会记录着你项目的名称、版本号、项目描述等，也会记录着你项目所依赖的其他库的信息和依赖库的版本号，这个配置文件就是package.json。

那么这个配置文件如何得到呢？

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

常见的配置文件

1. 图一是手动创建的
2. 图二是使用vue脚手架创建的
3. 图三是使用react脚手架创建的

package.json常见的属性

如果我们使用npm init –y，那么这些属性都是使用默认值，如果不加-y，我们就要一个一个手动写这些属性，如下：

必须填写的属性：name、version

• name是项目的名称；
• version是当前项目的版本号；
• description是描述信息，很多时候是作为项目的基本描述；
• author是作者相关信息（发布时用到）；
• license是开源协议（发布时用到）；
• private属性：记录当前的项目是否是私有的；
• • 当值为true时，npm是不能发布它的，这是防止私有项目或模块不小心发布出去；
• main属性：设置程序的入口。

main属性有什么用呢？

它是在你发布一个模块的时候会用到的，比如我们发布了axios模块，如果axios里面有一个index.js文件，那么我们通过 const axios = require('axios')是可以正确导入axios的，但是如果axios模块的入口我们改成了src/main.js，那么别人使用的时候就要先看axios源码，最后才知道需要用const axios = require('axios/src/main.js')才能导入成功，这就很麻烦了，所以我们在axios模块的package.json文件中定义一个main属性，用来指定这个模块的入口，比如：main：src/main.js，这样别人导入的时候直接写const axios = require('axios')就可以了，因为它会从main属性去查找入口文件的。

当然我们实际项目中，因为不会被发布，所以这个属性写不写都可以，而且看上面的常见的配置文件图，使用vue脚手架和react脚手架创建的项目都有没有main，因为是我们公司自己的项目，所以不需要main。但是一般开源出去的项目都需要main，如下是axios的package.json文件，就有main。

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

配置后我们可以通过 npm run 命令的key来执行这个命令。对于常用的 start、 test、stop、restart可以省略掉run直接通过 npm start等方式运行，但是一般情况我们都不省略。

• dependencies属性是指定无论开发环境还是生成环境都需要依赖的包；

通常是我们项目实际开发用到的一些库模块vue、vuex、vue-router、react、react-dom、axios等等；

当我们通过npm install axios安装axios的时候会发现，node_modules文件夹下除了有axios还有follow-redirects这个包，这是因为axios也依赖了follow-redirects包，不信你打开axios的package.json文件，会发现它的dependencies里面也有follow-redirects，如下：

就是这样层层依赖，最后所有的包都会被安装到node_modules文件夹下。

• devDependencies属性：一些包在生产环境是不需要的，比如webpack、babel等；

这个时候我们会通过 npm install webpack --save-dev，将它安装到devDependencies属性中。

• peerDependencies属性（peer:美[pɪr] 同龄）：还有一种项目依赖关系是对等依赖，也就是你依赖的一个包，它必须是以另外一个宿主包为前提的；

比如element-plus是依赖于vue3的，当你通过npm install element-plus是可以安装到dependencies里面的，但是会有如下警告，警告的意思就是安装element-plus必须安装vue3。

我们打开element-plus的package.json文件，发现peerDependencies属性下的确有vue3，如下：

如果有这个peerDependencies属性，安装element-plus才会警告需要安装vue3，如果没有peerDependencies属性，是没有这个警告的。

依赖的版本管理

我们会发现安装的依赖版本出现：^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 修改（可能不兼容之前的版本）；
• Y次版本号（minor）：当你做了向下兼容的功能性新增（新功能增加，但是兼容之前的版本）；
• Z修订号（patch）：当你做了向下兼容的问题修正（没有新功能，修复了之前版本的bug）；

semver版本规范是X.Y.Z，一个尖尖是X不变，两个尖尖是X和Y不变。

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

package.json和package-lock.json版本记录有什么用

我们可以发现package.json里面记录的版本都不是一个确切的版本，而是一个大概的版本，比如当我们只有一个package.json文件，里面记录的vue版本是^2.3.1，如果这时候vue版本更新了2.4.0，当我们删掉node_modules，想要重新安装新版本，可能你会使用npm install vue@2.4.0命令，如果有好多库需要升级，这就很麻烦了，所以在package.json里面我们版本不写死，这样我们直接执行npm install就可以安装到2.4.0版本的了。

可能你会说，我们在项目中安装的时候都是一个确切的版本啊，那是因为你项目中还有个package-lock.json文件，package-lock.json文件里面记录的都是最真实的版本，而不是大致版本了。如果这两个文件都存在，那么安装的时候就先看看package-lock.json文件记录的版本是不是符合package.json文件记录的大致版本吧，如果符合，那就安装package-lock.json记录的版本，如果你真的不想使用lock的版本了，那么就把package-lock.json文件删掉，重新执行npm install，那么就能安装符合package.json的最新的版本了。

npm install 命令

• npm install 会根据package.json的dependencies属性去安装依赖
• npm install xxx --save 会将包安装到node_modules里，并且写入到dependencies
• npm install xxx --save-dev 会将包安装到node_modules里，并且写入到devDependencies

安装npm包分两种情况：

• 全局安装（global install）： npm install webpack -g;
• 项目（局部）安装（local install）： npm install webpack

全局安装是直接将某个包安装到全局，npm全局安装的包都是一些工具包：yarn、webpack、n、cnpm等，但是类似于axios、express、koa等库文件，是会在代码中使用的，这些我们一般都是局部安装。

注意：并不是所有的工具包我们都是全局安装，比如webpack，我们可能全局安装，但是每个项目中又会局部安装一个webpack，这是因为每个项目的webpack版本可能不一样，都使用全局的肯定不行，一般全局的包我们只是做一个简单的使用，实际项目中还会局部安装特定的包。

项目安装

项目安装会在当前目录下生产一个 node_modules 文件夹，我们之前讲解require()查找顺序时有讲解过这个包在什么情况下被查找；

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

// 默认安装开发和生产依赖
npm install axios
npm install axios --save
npm install axios -S
npm i axios

// 安装开发依赖
npm install webpack --save-dev
npm install webpack -D
npm i webpack –D

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

npm install 原理

很多同学之前应该已经会了 npm install <package>，但是你是否思考过它的内部原理呢？

执行 npm install它背后帮助我们完成了什么操作？

我们会发现还有一个称为package-lock.json的文件，它的作用是什么？

从npm5开始，npm支持缓存策略（来自yarn的压力），缓存有什么作用呢？

这是一幅我画出的根据 npm install 的原理图：

npm install 原理图解析

1. 首先检测是否有package-lock.json文件
2. 如果有lock文件，判断lock中包的版本是否和package.json中一致
   • 如果一致，先查缓存，查到就使用，查不到说明被删了，再重新下载（步骤3）
   • 如果不一致，重新下载（步骤3）
3. 如果没有lock文件，说明没下过，就去下载
   • 就分析包的依赖关系，然后从registry仓库中下载压缩包
   • 对压缩包进行缓存，然后解压，放到node_modules文件夹中
   • 最后会生成package-lock.json文件

package-lock.json

package-lock.json文件解析：

• name：项目的名称；
• version：项目的版本；
• lockfileVersion：lock文件的版本；
• requires：使用requires来跟踪模块的依赖关系；
• dependencies：项目的依赖，如下：

当前项目依赖axios，但是axios依赖follow-redireacts，axios中的属性如下：

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

npm其他命令

我们这里再介绍几个比较常用的：

卸载某个依赖包：

npm uninstall package 

强制重新build

npm rebuild

一般这个命令使用的比较少，因为我们一般都是直接把node_modules文件夹删掉，然后重新执行npm install

清除缓存

npm cache clean

npm的命令其实是非常多的，更多的命令，可以根据需要查阅官方文档：docs.npmjs.com/cli-documen…

yarn工具

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

yarn 是为了弥补 npm 的一些缺陷而出现的，早期的npm存在很多的缺陷，比如因为没有缓存导致的安装依赖速度很慢、版本依赖混乱等等一系列的问题，虽然从npm5版本开始，进行了很多的升级和改进，但是依然很多人喜欢使用yarn。

下面是npm和yarn的一些命令的对比：

注意：npm和yarn不要同时使用，否则会有管理混乱的问题。

cnpm工具

由于一些特殊的原因，某些情况下我们没办法很好的从 registry.npmjs.org 下载下来一些需要的包，因为网速可能比较慢。

查看npm镜像：

npm config get registry # npm config get registry

这时候我们可以直接设置npm的镜像为淘宝：

npm config set registry https://registry.npm.taobao.org

但是对于大多数人来说（比如我），并不希望将npm镜像修改了：

1. 第一，不太希望随意修改npm原本从官方下来包的渠道；
2. 第二，担心某天淘宝的镜像挂了或者不维护了，又要改来改去；

这个时候，我们可以使用cnpm，并且将cnpm设置为淘宝的镜像：

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

这时候我们就有两个工具了，npm是官方的镜像，cnpm是淘宝的镜像，这时候我们想用哪个就用那个了。

npx工具

npx是npm5.2之后自带的一个命令。npx的作用非常多，但是比较常见的是使用它来调用项目中的某个模块的指令。

我们以webpack为例：全局安装的是webpack5.1.3，全局安装之后就会在环境变量中添加webpack命令，项目安装的是webpack3.6.0。 我们先进入项目目录，然后在终端执行 webpack --version使用的是哪一个命令呢？

显示结果会是 webpack 5.1.3，事实上使用的是全局的，为什么呢？

原因非常简单，因为项目的webpack是在node_modules文件夹下的bin里面，所以找不到webpack，就会去全局找，找到环境变量中的命令，并且执行命令，所以打印webpack 5.1.3。

如何解决这个问题呢？

局部命令的执行

那么如何使用项目（局部）的webpack，常见的是三种方式：

• 方式一：明确查找到node_module下面的webpack

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

./node_modules/.bin/webpack --version

• 方式二：在 scripts定义脚本，来执行webpack；

修改package.json中的scripts：

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

这种方式会优先找node_modules文件夹中的.bin文件夹中的命令，如果没有再找全局的，所以这种方式也可以。

• 方式三：使用npx

npx webpack --version

npx的原理非常简单，它会到当前目录的node_modules/.bin目录下查找对应的命令，这种方式其实和方式一是一样的。

npm发布自己的包

1. 首先肯定是将自己的包的代码写好
2. 注册npm账号：www.npmjs.com/ ，选择sign up
3. 在命令行登录：

npm login

4. 修改package.json，填写自己的基本信息
5. 使用npm publish发布到registry上

npm publish

6. 更新仓库：

• 先修改代码
• 修改版本号（最好符合semver规范）
• 重新发布（npm publish）

发布成功就可以通过npm install xxx使用了。

7. 删除发布的包：

npm unpublish

8. 让发布的包过期：

npm deprecate