【前端体系课】-- 包管理工具

npm

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

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

安装

安装 Node 的过程会自动安装 npm 工具

管理的包

npm 包的官网: https://www.npmjs.org/

存放位置

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

配置文件

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

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

这个配置文件就是 package. json

该文件名称固定不可变

得到方式

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

常见的配置文件

配置属性

必须填写的属性： name、 version

name 是项目的名称
version 是当前项目的版本号
description 是描述信息，很多时候是作为项目的基本描述
author 是作者相关信息（发布时用到）
license 是开源协议（发布时用到）

private 属性:

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

main 属性:

设置程序的入口
比如我们使用 axios 模块 const axios = require (‘axios’)
如果有 main 属性，实际上是找到对应的 main 属性查找文件的

scripts 属性

配置一些脚本命令，以键值对的形式存在
配置后我们可以通过 npm run 命令的 key 来执行这个命令

npm start 和 npm run start 的区别是什么？
它们是等价的；
对于常用的 start、 test、 stop、 restart 可以省略掉 run 直接通过 npm start 等方式运行
npm run start 可简写成 npm start
若是自定义的脚本命令, 如 prod
则必须写成 npm run prod , 不能简写 npm prod

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 属性

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

browserslist 属性

配置打包后的 JavaScript 浏览器的兼容情况，参考
否则我们需要手动的添加 polyfills 来让支持某些语法
也就是说它是为 webpack 等打包工具服务的一个属性

依赖的版本管理

版本规范是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
项目（局部）安装（local install）： npm install webpack

项目安装会在当前目录下生成一个 node_modules 文件夹,
require 查找顺序是, 首先在当前项目下的 node_modules 文件夹下查找对应的包, 否则继续向上级目录查找

# 默认安装开发和生产依赖  
npm install axios  
npm i axios  
# 开发依赖  
npm install webpack --save-dev  
npm install webpack -D  
npm i webpack –D  
# 根据package.json中的依赖包  
npm install

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

# 强制重新build
npm rebuild

# 清除缓存
npm cache clean

原理:
npm install 会检测是有 package-lock. json 文件：

没有 lock 文件
- 分析依赖关系，这是因为我们可能包会依赖其他的包，并且多个包之间会产生相同依赖的情况
- 从 registry 仓库中下载压缩包（如果我们设置了镜像，那么会从镜像服务器下载压缩包）
- 获取到压缩包后会对压缩包进行缓存（从 npm5 开始有的）
- 将压缩包解压到项目的 node_modules 文件夹中（前面我们讲过， require 的查找顺序会在该包下面查找）
有 lock 文件
- 检测 lock 中包的版本是否和 package. json 中一致（会按照 semver 版本规范检测）
- 不一致，那么会重新构建依赖关系，直接会走顶层的流程
- 一致的情况下，会去优先查找缓存
- 没有找到，会从 registry 仓库下载，直接走顶层流程
- 查找到，会获取缓存中的压缩文件，并且将压缩文件解压到 node_modules 文件夹中

package-lock. json

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

yarn

另一个 node 包管理工具 yarn

由 Facebook、 Google、 Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具
弥补早期 npm 的一些缺陷而出现的
早期的 npm 存在很多的缺陷，比如安装依赖速度很慢、版本依赖混乱等等一系列的问题
虽然从 npm5 版本开始，进行了很多的升级和改进，但是依然很多人喜欢使用 yarn

cnpm

由于一些特殊的原因，某些情况下我们没办法很好的从 https://registry.npmjs.org 下载下来一些需要的包

# 查看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 的作用非常多，但是比较常见的是使用它来调用项目中的某个模块的指令

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

# 在package.json中的scripts

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

pnpm

performant npm

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

硬链接和软链接
硬链接（hard link）:

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

符号链接（软链接 soft link、 Symbolic link）：

符号链接（软链接、 Symbolic link）是一类特殊的文件
包含有一条以绝对路径或者相对路径的形式指向其它文件或者目录的引用

演示:

文件的拷贝：

window: copy foo.js foo_copy.js  
macos : cp foo.js foo_copy.js

硬链接

window: mklink /H aaa_hard.js aaa.js  
macos : ln foo.js foo_hard.js

软链接

window: mklink aaa_soft.js aaa.js  
macos : ln -s foo.js foo_copy.js

原理:

当使用 npm 或 Yarn 时，如果你有 100 个项目，并且所有项目都有一个相同的依赖包，那么，你在硬盘上就需要保存 100 份该相同依赖包的副本
如果是使用 pnpm，依赖包将被存放在一个统一的位置，因此:
- 如果你对同一依赖包使用相同的版本，那么磁盘上只有这个依赖包的一份文件
- 如果你对同一依赖包需要使用不同的版本，则仅有版本之间不同的文件会被存储起来
- 所有文件都保存在硬盘上的统一的位置
- 当安装软件包时，其包含的所有文件都会硬链接到此位置，而不会占用额外的硬盘空间；
- 这让你可以在项目之间方便地共享相同版本的依赖包

安装:

npm install -g pnpm

命令:

npm