包管理工具

1、npm

• 包管理工具npm：

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

  • 目前已经不仅仅是Node包管理器了，在前端项目中使用它来管理依赖的包，比如vue、vue-router、vuex、express、koa、react、react-dom、axios、babel、webpack等等

• 如何下载和安装npm工具呢？

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

  • node管理工具：Node，安装Node的过程会自动安装npm工具

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

  • npm包的官网

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

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

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

2、npm的配置文件

2.1 生成配置文件

• 方式一：手动从零创建项目，npm init
  • npm init 创建时填写信息
  • npm init -y（所有信息使用默认的）
• 方式二：通过脚手架创建项目，脚手架会帮助生成package.json，并且里面有相关的配置

2.2 配置文件常见属性

• 必须填写的属性：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属性

  • 一些包在生成环境是不需要的，比如webpack、babel等
  • 这个时候通过 npm install webpack --save-dev，将它安装到devDependencies属性中

• peerDependencies属性

  • 还有一种项目依赖关系是对等依赖，也就是你依赖的一个包，它必须是以另外一个宿主包为前提的；
  • 比如element-plus是依赖于vue3的，ant design是依赖于react、react-dom；

2.3 依赖的版本管理

• npm的包通常需要遵从semver版本规范：

  • semver：semver.org/lang/zh-CN/
  • npm semver：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永远安装最新的版本

3、npm install

3.1 执行 install

• 安装npm包分两种情况：

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

• 全局安装：直接将某个包安装到全局

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

3.2 项目安装

• 默认安装开发和生产依赖

  npm install axios
  npm i axios
  

• 开发依赖

  npm install webpack --save-dev
  npm install webpack -D
  npm i webpack –D
  

• 根据package.json中的依赖包

  npm install
  

3.3 npm install 原理

• 原理图

• 原理图解析

  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用来从缓存中获取索引，再通过索引去获取压缩包文件

4、npm 其他命令

• 卸载某个依赖包：

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

• 强制重新build

  npm rebuild
  

• 清除缓存

  npm cache clean
  

• 更多命令可查阅文档：

  • 官方文档

5、yarn

• 安装 npm install yarn -g
• 使用

6、cnpm的使用(镜像服务器)

• 查看npm镜像：npm config get registry

• 直接设置npm的镜像：npm config set registry https://registry.npm.taobao.org

• 使用cnpm，并且将cnpm设置为淘宝的镜像：

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

7、npx

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

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

局部命令的执行

• 如何使用项目（局部）的webpack，常见的方式如下：

  • 方式一：明确查找到node_module下面的webpack(在项目根目录下)
    • ./node_modules/.bin/webpack --version
  • 方式二：在 scripts定义脚本，来执行webpack

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

  • 方式三：使用npx
    • npx webpack --version

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

8、npm 发布自己的包

• 注册npm账号：

  • 官网

• 在命令行登录：npm login

• 修改package.json

• 发布到npm registry上: npm publish

• 更新仓库：

  • 1.修改版本号(最好符合semver规范)
  • 2.重新发布

• 删除发布的包：npm unpublish

• 让发布的包过期：npm deprecate

9、pnpm

pnpm: performant npm ，意味 “高性能的” npm

9.1 硬链接、软连接

• 硬链接（hard link）：

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

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

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

  

9.2 pnpm到底做了什么？

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

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

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

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

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

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

    • 可以在项目之间方便地共享相同版本的依赖包

  

9.4 pnpm创建非扁平的 node_modules 目录

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

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

• pnpm 创建非扁平化目录

9.5 pnpm安装和使用

• 安装

  • 官网提供了很多种方式来安装pnpm：www.pnpm.cn/installatio…
  • 通过npm安装：npm install -g pnpm

• 常用命令

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

9.6 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