前端工程化(三)之包管理工具详解 (精品、面试必备基础)(春招、秋招)

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

npm 包管理工具

Node Package Manager，也就是Node包管理器；
但是目前已经不仅仅是Node包管理器了，在前端项目中我们也在使用它来管理依赖的包；
比如vue、vue-router、vuex、express、koa、react、react-dom、axios、babel、webpack等等；
npm管理的包可以在哪里查看、搜索呢？
npm包官网
npm管理的包存放在哪里呢？
我们发布自己的包其实是发布到registry上面的；
当我们安装一个包时其实是从registry上面下载的包；

npm 配置文件 — package.json

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

如何配置文件

① 手动 npm init -y
② 通过脚手架穿件项目, 脚手架会帮助我们生成 package.json , 并且里面有相关配置

常见的属性

• 必须填写的属性: name 、 version
  name: 项目名字
  version: 当前项目版本号
  description: 是描述信息
  author: 作者相关
  license: 开源协议

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

• main 属性
  设置程序入口

• script 属性
  scripts属性用于配置一些脚本命令，以键值对的形式存在；
  配置后我们可以通过 npm run 命令的key来执行这个命令；
  npm start和npm run start的区别是什么？
  它们是等价的；
  对于常用的 start、 test、stop、restart可以省略掉run直接通过 npm start等方式运行；

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

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

依赖版本管理

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 install 执行过程
npm install的过程涉及多个步骤，确保项目中的所有依赖都被正确安装。以下是该过程的逐步说明：

1. 读取package.json：npm首先会读取项目中的package.json文件，这个文件包含了项目所需的所有依赖及其版本信息。
2. 检查package-lock.json ：如果项目中存在package-lock.json文件，npm会使用它来检查已安装的依赖是否与锁定的版本一致。这确保了依赖的一致性和可重复性。
3. 解析依赖树：npm会解析整个依赖树，确定需要安装哪些顶级和子依赖。这个过程包括分析每个包的依赖关系，以及它们的兼容性。
4. 检查缓存：在安装依赖之前，npm会检查其缓存，看看是否已经有下载过的包。如果有，并且版本匹配，npm会直接从缓存中获取，而不是重新下载，这样可以加快安装速度并节省带宽。
5. 安装依赖：根据package.json和package-lock.json的信息，npm会开始下载和安装所有必要的依赖包。这包括顶级依赖和它们的任何子依赖。
6. 构建依赖一致性：如果某个依赖包包含二进制文件或需要编译的代码，npm可能会执行构建步骤，以确保这些包在当前系统上能够正确运行。
7. 验证依赖一致性：安装完成后，npm会再次验证所有依赖项是否符合package-lock.json中记录的版本。这确保了即使在网络问题或其他异常情况下，依赖的安装也是一致的。
8. 写入package-lock.json：如果在安装过程中发现node_modules中的依赖与package-lock.json不一致，或者package-lock.json不存在，npm会创建或更新package-lock.json文件，记录下确切的依赖版本和结构。
9. 清理工作：安装完成后，npm会进行一些清理工作，比如删除不必要的临时文件和缓存。

通过运行npm install时添加参数--timing=true和--loglevel=verbose，可以查看详细的安装过程和时间消耗。这些步骤确保了项目的依赖管理是高效、可靠且可复现的。

package-lock.json

name: 项目的名称
version: 项目版本
lockfileVersion: lock文件版本
requires: 使用似requires 来跟踪模块的依赖
dependencies: 项目依赖
- 当前项目依赖 axios , 但是axios 依赖 follow-redireacts
- axios 的属性如下
version表示实际安装的axios的版本；
resolved用来记录下载的地址，registry仓库中的位置；
requires/dependencies记录当前模块的依赖；
integrity用来从缓存中获取索引，再通过索引去获取压缩包文件；

package-lock.json Vs package.json
package.json和package-lock.json都是npm中重要的文件，但它们在依赖管理中扮演着不同的角色。具体来看：

1. 内容和作用：

• package.json是项目的核心配置文件，它记录了项目的元数据、依赖包名称及其版本范围等信息。这个文件中的dependencies字段指定了项目运行时所依赖的模块，而devDependencies指定了项目开发所需的模块。这些依赖版本通常是通过语义化版本（semver）来指定的，如^1.2.3表示匹配主版本号为1，次版本号大于或等于2，修订号为3或更高的版本。
• package-lock.json是一个锁定文件，它记录了确切的依赖结构和每个依赖项的确切版本号。当执行npm install时，如果存在package-lock.json文件，npm会根据该文件来安装依赖，而不是根据package.json中的版本范围。这样可以确保每次安装都能获得相同的依赖版本，避免因版本差异导致的问题。

2. 生成和使用：

• package.json是开发者手动维护的文件，当通过npm install安装新的依赖包时，npm会自动更新package.json文件，添加或修改依赖信息。
• package-lock.json是在npm5及更高版本中引入的，当执行npm install时自动生成。它确保了依赖的一致性和可重复性。使用cnpm安装时，不会生成package-lock.json文件，也不会根据它来安装依赖包。

3. 版本控制：

• package.json中的版本控制是基于语义化版本的，通常只锁定大版本号，允许在一定范围内的小版本和补丁版本变动。
• package-lock.json则锁定了所有依赖包的确切版本，包括小版本和补丁版本，确保了环境的一致性。
  总的来说，package.json负责声明项目所需的依赖及其版本范围，而package-lock.json确保了依赖安装的一致性和可重复性。这两个文件共同工作，帮助开发者维护一个稳定且可靠的项目依赖环境。

相关命令

说明

安装开发依赖：npm install <package> --save-dev 或 npm i <package> -D
安装生产依赖：npm install <package> --save 或 npm i <package> -S
安装默认依赖（不指定类型）：npm install <package> 或 npm i <package>

开发依赖 VS 生产依赖

在npm中，依赖包可以被分为两类：生产依赖和开发依赖。这两种依赖在package.json文件中分别通过dependencies和devDependencies字段来管理。以下是对这两种依赖的详细区别：

• 生产依赖（dependencies）：

  • 这些依赖是项目在生产环境中运行时所必需的。
  • 使用--save或-S标志安装的包会被添加到dependencies中。
  • 当部署应用到服务器或发布到生产环境时，这些依赖会一起被安装，因为它们是应用程序运行的基础。
  • 如果没有明确指定--save或-S，默认情况下安装的包不会被添加到任何依赖列表中。

• 开发依赖（devDependencies）：

  • 这些依赖仅在开发环境中使用，例如测试框架、构建工具等。
  • 使用--save-dev或-D标志安装的包会被添加到devDependencies中。
  • 开发依赖不会随应用程序一起发布到生产环境，因此在设置生产环境时不会安装这些依赖。
  • 这些依赖对于开发过程是必要的，但对于最终用户来说是不必要的。

总的来说，生产依赖是项目上线后在生产环境中运行所必需的，而开发依赖则是在开发过程中使用的辅助工具，不会随应用一起发布。在实际开发中，正确区分和管理这两种依赖对于项目的维护和部署是非常重要的。

安装npm包分两种情况：

全局安装（global install）： npm install webpack -g;
项目（局部）安装（local install）： npm install webpack
但是很多人对全局安装有一些误会：
通常使用npm全局安装的包都是一些工具包：yarn、webpack等；
并不是类似于 axios、express、koa等库文件；
所以全局安装了之后并不能让我们在所有的项目中使用 axios等库；

详解:

• 全局安装主要用于工具包： 通常，我们会使用npm install -g命令来全局安装一些工具包，比如yarn、webpack等。这些工具包提供的命令行接口或可执行文件，需要在系统范围内可用，因此它们被安装在全局环境中。
• 库文件通常不全局安装： 像axios、express、koa这样的库文件，通常是作为项目依赖在项目的本地安装的。这是因为这些库是用于开发应用程序的，而不是作为命令行工具使用的。每个项目可能依赖于不同版本的这些库，所以将它们全局安装会导致版本冲突和不可预测的行为。
• 全局安装并不意味着在所有项目中可用： 如前所述，全局安装的包并不能保证在所有项目中都可用。全局安装的包仅在全局环境中可用，而不是针对特定的项目。如果你想在多个项目中使用某个库，更好的做法是在每个项目中本地安装该库，或者使用像npx这样的工具来临时执行一个包。
• 总结来说，全局安装主要用于那些需要在整个系统中使用的工具包，而库文件应该作为项目的本地依赖进行安装。理解这些区别有助于更好地管理你的项目依赖，并避免常见的误解和问题。
  例子

npm install axios

``

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

npm 其他命令

卸载某一个依赖包

npm uninstall package
npm uninstall package --save-dev
npm uninstall package -D

强制重新build

npm rebuild

清除缓存

npm cache clean

npm命令大全

yarn 工具

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

cnpm 工具

由于一些特殊的原因，某些情况下我们没办法很好的从 https://registry.npmjs.org下载下来一些需要的包。
设置 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的作用非常多，但是比较常见的是使用它来调用项目中的某个模块的指令。
npx VS npm

通过npx安装的依赖是临时的，运行完命令后会删除掉。
当您使用npx来执行一个命令时，它会首先检查当前项目中是否存在可执行的依赖文件。如果不存在，npx会在node_modules/.bin 目录下查找，如果依然没有找到，它会去环境变量path中寻找。如果这些地方都没有找到对应的依赖，npx会从npm的缓存中安装所需的依赖到 node_cache/_npx 目录中。这个安装过程是临时的，意味着一旦命令执行完毕，这些依赖并不会被添加到您的项目中。
这种机制的好处在于，您可以在不污染项目依赖树的情况下尝试运行一个包的命令。这对于一次性的任务或者测试某个包的特定版本非常有用。例如，如果您想要快速创建一个React应用，可以使用npx create-react-app my-app，这会在当前目录下创建一个React应用的文件夹，而不需要将create-react-app添加到项目的依赖中。
总结来说，npx提供了一个方便的方式来运行和管理Node.js包中的可执行文件，它允许您临时安装并使用包，而不需要担心这些包会留在您的项目中。

例子:
npx是一个用于执行npm包中的命令的工具，它可以在不将包添加到项目依赖的情况下执行命令。要使用npx安装axios，您可以运行以下命令：

npx axios

这将会临时安装axios，并在安装完成后执行它。如果您只是想要安装axios而不立即执行它，您可以使用npx install axios，这样会安装 axios 但不会执行它。
需要注意的是，通过 npx 安装的 axios 是临时的，一旦您关闭终端或结束当前会话，这个安装就会被移除。如果您想要永久地将 axios 添加到项目中，建议使用 npm install axios 或 yarn add axios 这样的命令。

局部命令执行

如果我在终端执行 webpack --version使用的是哪一个命令呢？
 显示结果会是 webpack 5.1.3，事实上使用的是全局的，为什么呢？
 原因非常简单，在当前目录下找不到webpack时，就会去全局找，并且执行命令；

那么如何使用项目（局部）的webpack，常见的是两种方式：
方式一：明确查找到node_module下面的webpack

./node_modules/.bin/webpack --version  //  需要进入webpack的 bin 目录, 然后运行命令  webpack --version

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

"scripts" : {
	"webpack": "webpack --verison"
} 

方式三:

npx webpack --version

npx 的原理很简答, 就是在node_moudles/.bin目录下找到对应的命令