包管理工具详解

有以下几种： npm、yarn、cnpm、npx、pnpm

包管理工具npm ：

 Node Package Manager，也就是Node包管理器；

 但是目前已经不仅仅是Node包管理器了，在前端项目中我们也在使用它来管理依赖的包；

 比如vue、vue-router、vuex、express、koa、react、react-dom、axios、babel、webpack等等

下载和安装npm工具 ：

        安装相关的npm包的官网         https://www.npmjs.org/

        npm属于node的一个管理工具，所以我们需要先安装Node

       node管理工具： https://nodejs.org/en/  安装Node的过程会自动安装npm工具

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

        发布自己的包其实是发布到registry上面的；

        安装一个包时其实是从registry上面下载的包；

 npm的配置文件

我们如何使用npm来管理这么多包呢？

         事实上，我们每一个项目都会有一个对应的配置文件，无论是前端项目（Vue、React）还是后端项目（Node）；

         这个配置文件会记录着你项目的名称、版本号、项目描述等；

         也会记录着你项目所依赖的其他库的信息和依赖库的版本号；

         这个配置文件就是package.json

怎么配置文件如何得到？

         方式一：手动从零创建项目，npm init –y

          方式二：通过脚手架创建项目，脚手架会帮助我们生成package.json，并且里面有相关的配置

常见的配置文件

常见的属性 

   必须填写的属性：name、version

         name是项目的名称；

         version是当前项目的版本号；

         description是描述信息，很多时候是作为项目的基本描述；

         author是作者相关信息（发布时用到）；

         license是开源协议（发布时用到）；

     private属性：

         private属性记录当前的项目是否是私有的；

          当值为true时，npm是不能发布它的，这是防止私有项目或模块发布出去的方式；

    main属性：

         ✓ 设置程序的入口

         ✓ 比如我们使用axios模块 const axios = require('axios');

        ✓ 如果有main属性，实际上是找到对应的main属性查找文件的；

        scripts属性 ：

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

                 配置后我们可以通过 npm run 命令的key来执行这个命令；

                 npm start和npm run start的区别是什么？

                        ✓ 它们是等价的；

                        ✓ 对于常用的 start、 test、stop、restart可以省略掉run直接通过 npm start等方式运行；

         dependencies属性：

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

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

                 与之对应的是devDependencies；

        devDependencies属性：

                 一些包在生成环境是不需要的，比如webpack、babel等；

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

        peerDependencies属性：

                 还有一种项目依赖关系是对等依赖，也就是你依赖的一个包，它必须是以另外一个宿主包为前提的；

                 比如element-plus是依赖于vue3的，ant design是依赖于react、react-dom；

        engines属性：

                 engines属性用于指定Node和NPM的版本号；

                 在安装的过程中，会先检查对应的引擎版本，如果不符合就会报错；

                 事实上也可以指定所在的操作系统 "os" : [ "darwin", "linux" ]，只是很少用到；

        browserslist属性：

                 用于配置打包后的JavaScript浏览器的兼容情况，参考；

                 否则我们需要手动的添加polyfills来让支持某些语法；

                 也就是说它是为webpack等打包工具服务的一个属性（这里不是详细讲解webpack等工具的工作原理，所以不再给出详情）；

依赖的版本管理 

        发现安装的依赖版本出现：^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）； 

        这里解释一下 ^和~的区别：

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

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

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

npm install 命令 

     安装npm包分两种情况：

           全局安装（global install）： npm install webpack -g;

                全局安装是直接将某个包安装到全局

                比如全局安装yarn： npm install yarn -g

          项目（局部）安装（local install）： npm install webpack

很多人对全局安装有一些误会：

         通常使用npm全局安装的包都是一些工具包：yarn、webpack等；

         并不是类似于 axios、express、koa等库文件；

         所以全局安装了之后并不能让我们在所有的项目中使用 axios等库；

项目安装

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

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

        # 默认安装开发和生产依赖 npm install axios 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会检测是有package-lock.json文件

         没有lock文件

             ✓ 分析依赖关系，这是因为我们可能包会依赖其他的包，并且多个包之间会产生相同依赖的情况；

             ✓ 从registry仓库中下载压缩包（如果我们设置了镜像，那么会从镜像服务器下载压缩包）；

            ✓ 获取到压缩包后会对压缩包进行缓存（从npm5开始有的）；

            ✓ 将压缩包解压到项目的node_modules文件夹中（前面我们讲过，require的查找顺序会在该包下面查找）

      有lock文件

             ✓ 检测lock中包的版本是否和package.json中一致（会按照semver版本规范检测）；

                ~ 不一致，那么会重新构建依赖关系，直接会走顶层的流程；

             ✓ 一致的情况下，会去优先查找缓存

                ~ 没有找到，会从registry仓库下载，直接走顶层流程；

              ✓ 查找到，会获取缓存中的压缩文件，并且将压缩文件解压到node_modules文件夹中；

package-lock.json 

        package-lock.json文件解析

                 name：项目的名称；

                 version：项目的版本；

                 lockfileVersion：lock文件的版本；

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

                 dependencies：项目的依赖  当前项目依赖axios，但是axios依赖follow-redireacts；

                 axios中的属性如下：

                        ✓ version表示实际安装的axios的版本；

                        ✓ resolved用来记录下载的地址，registry仓库中的位置；

                        ✓ requires/dependencies记录当前模块的依赖；

                        ✓ integrity用来从缓存中获取索引，再通过索引去获取压缩包文件；

         

npm其它常用命令

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

        强制重新build:      npm rebuild

        清除缓存:        npm cache clean

npm的命令其实是非常多：

         https://docs.npmjs.com/cli-documentation/cli        根据需要查阅官方文档

yarn工具 

        node包管理工具yarn：

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

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

         早期的npm存在很多的缺陷，比如安装依赖速度很慢、版本依赖混乱等等一系列的问题；

         虽然从npm5版本开始，进行了很多的升级和改进，但是依然很多人喜欢使用yarn；

 

 查询更多官网：https://www.npmjs.org/

cnpm工具

查看npm镜像：

        npm config get registry # npm config get registry

我们可以直接设置npm的镜像：

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

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

 第一，不太希望随意修改npm原本从官方下来包的渠道；

 第二，担心某天淘宝的镜像挂了或者不维护了，又要改来改去；

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

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

npx工具

npx是npm5.2之后自带的一个命令

         npx的作用非常多，但是比较常见的是使用它来调用项目中的某个模块的指令。

以webpack为例：

         全局安装的是webpack5.1.3

         项目安装的是webpack3.6.0

 如果我在终端执行 webpack --version使用的是哪一个命令呢？

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

         原因非常简单，在当前目录下找不到webpack时，就会去全局找，并且执行命令； 

局部命令的执行 

webpack，常见的是两种方式：

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

        在终端中使用如下命令（在项目根目录下）、./node_modules/.bin/webpack --version

二：在 scripts定义脚本，来执行webpack

        修改package.json中的scripts、"scripts": { "webpack": "webpack --version" }

三：使用npx

        npx webpack --version

npx的原理非常简单，它会到当前目录的node_modules/.bin目录下查找对应的命令；

npm发布自己的包 

注册npm账号：          https://www.npmjs.com/          选择sign up

在命令行登录：        npm login

修改package.json

发布到npm registry上        npm publish

删除发布的包：npm unpublish

让发布的包过期： npm deprecate

更新仓库：          1.修改版本号(最好符合semver规范)          2.重新发布

什么是pnpm呢？ 

        官方的解释：  pnpm：我们可以理解成是performant npm缩写

 

有哪些公司在用呢？

        包括Vue在内的很多公司或者开源项目的包管理工具都切换到了pnpm

pnpm到底做了什么呢？ 

当使用 npm 或 Yarn 时，如果你有 100 个项目，并且所有项目都有一个相同的依赖包，那么， 你在硬盘上就需要保存 100 份该相同依赖包的副本。

如果是使用 pnpm，依赖包将被 存放在一个统一的位置，因此：

         如果你对同一依赖包使用相同的版本，那么磁盘上只有这个依赖包的一份文件；

         如果你对同一依赖包需要使用不同的版本，则仅有 版本之间不同的文件会被存储起来；

         所有文件都保存在硬盘上的统一的位置：

                ✓ 当安装软件包时， 其包含的所有文件都会硬链接到此位置，而不会占用 额外的硬盘空间；

                 ✓ 这让你可以在项目之间方便地共享相同版本的 依赖包；

 

pnpm创建非扁平的 node_modules 目录 

当使用 npm 或 Yarn Classic 安装依赖包时，所有软件包都将被提升到 node_modules 的 根目录下。

         其结果是，源码可以访问 本不属于当前项目所设定的依赖包；

pnpm的安装和使用 

   那么我们应该如何安装pnpm呢？

         官网提供了很多种方式来安装pnpm：https://www.pnpm.cn/installation 

          因为我们每个同学都要求安装过Node，Node中有npm，所以我们通过npm安装即可；

 

 以下 是一个与 npm 等价命令的对照表，帮助你快速入门：

npm 命令

        npm install   、npm install 、npm uninstall  、npm run

pnpm 等价命令

        pnpm install、  pnpm add、  pnpm remove、   pnpm

更多命令和用法可以参考pnpm的官网：https://pnpm.io/zh/

pnpm的存储store

在pnpm7.0之前，统一的存储位置是 ~/.pnpm-score中的；

在pnpm7.0之后，统一的存储位置进行了更改：<pnpm home directory>/store

         在 Linux 上，默认是 ~/.local/share/pnpm/store

         在 Windows 上： %LOCALAPPDATA%/pnpm/store

         在 macOS 上： ~/Library/pnpm/store

 我们可以通过一些终端命令获取这个目录：获取当前活跃的store目录

        pnpm store path

另外一个非常重要的store命令是prune（修剪）：从store中删除当前未被引用的包来释放store的空间

        pnpm store prune