前端-包管理器

文章目录

- 前端工程化包管理器
- - Npm
  - - Npm常用命令
  - Yarn
  - - Yarn 常用命令
  - pnpm
  - - pnpm常用指令
  - 依赖项
  - npm 和 Yarn 的比较
  - npm yarn pnpm 对比
  - jsDelivr CDN

前端工程化包管理器

包管理器是一种工具，它帮助开发者管理项目中的库和依赖项，如安装、更新、配置和卸载。在 JavaScript 和 Node.js 生态系统中，最流行的包管理器是 npm 和 yarn。

Npm

npm (Node Package Manager)

npm 是 Node.js 的默认包管理器，随 Node.js 一起安装。它有一个命令行客户端以及一个在线数据库（npm registry），其中包含了数百万个包（libraries）。
通过 npm install 命令安装依赖，npm update 更新依赖，npm uninstall 卸载依赖等。它支持脚本运行、发布包和版本控制。
npm 5 之后引入了 package-lock.json 文件，用于锁定依赖的版本，确保安装一致性。
自动安装 peer 依赖。
支持私有包和组织范围（scoped）的包管理。

模块管理（安装和卸载）
- 安装在全局环境下和安装在当前项目中
- 全装在全局：$ npm install xxx --global （$ npm i -g xxx）
- 安装在本地项目中：$ npm i xxx
  - 把模块设置为开发依赖（开发中）：$ npm i xxx --save-dev
  - 把模块设置为生产依赖（部署到服务器）：$ npm i xxx --save
安装在全局和本地的区别
- 安装在全局后对任何项目都有作用（也有可能导致版本冲突），但是只能基于命令的方式管理，不能基于CommonJS 中的 require 导入使用（通俗说：就是不能导入到文件中基于代码来处理）
  - node -v 查看安装的node版本
  - $ npm root -g 查看全局安装到的目录
  - 之所以可以使用命令操作，是因为在全局目录下生成了一个 xxx.cmd 的文件
- 安装在本地默认不能基于命令管理，但是可以导入到文件中基于代码操作，只对当前项目有用
  在本地安装模块之前，最好先：$ npm init -y，生成 package.json 模块配置文件，把安装的模块生成配置清单，存放在 package.json 中，后期别人需要部署项目的时候，只需要执行 $ npm i 就可以把所有的依赖项重新安装一遍 “跑环境”
  - $ npm i 是把开发和生产依赖都安装一遍
  - $ npm i --production 只安装生产依赖的模块
- 在 package.json 中，可以基于 scripts 选项配置本地可执行的脚本命令 $npm run xxx
  javascript "scripts": { // AAA 是命令，值是要做的事情 "AAA": "node xxx.js" }
```
 在配置可执行脚本命令的时候，基于process的环境变量区分开发还是生产环境
 ```javascript
   "scripts": {
   	// set NODE_EVN=dev 设置全局环境变量（MAC下用 export NODE_EVN=dev）
       "serve": "set NODE_EVN=dev&&node test1.js",
      	"build": "set NODE_EVN=pro&&node test1.js"
   }
 ```
```

Npm常用命令

npm -l    用于查看各个命令的简单用法（所以下面的可以用这个命令来查看）
npm init    用来初始化生成一个新的 package.json文件。
它会向用户提问一系列问题，如果你觉得不用修改默认配置，一路回车就可以了。
npm -h 或 npm help    查看npm命令的帮助信息
npm ls 或 npm list    查看npm已安装的包信息
npm -v 或 npm --version    查看npm版本信息
npm install npm -g   npm更新自身
npm info \<pkg> version    查看某个模块最新发布版本信息，如npm info underscore version
npm search \<keyword>    查找与keyword匹配的模块信息
npm view \<pkg> version    查看一个包的最新发布版本
npm i 或 npm install    npm安装当前目录package.json里面的所有包，
下面的i同样可以用install代替，当卸载时，i用uninstall代替
npm update \<pkg> [-g]  更新指定模块，有-g表示全局
npm i \<pkg> [-g]    安装指定模块，有-g表示全局
npm i \<pkg>@version [-g]   安装指定版本的模块，有-g表示全局
npm i \<pkg> --save    安装包的同时自动更新package.json的依赖
npm i \<pkg> --save-dev    安装包的同时自动更新package.json的开发依赖
npm i \<pkg> --save-optional    安装包的同时自动更新package.json的可选版本依赖
npm i \<pkg> --save-exact   安装包并写入确切版本依赖，而不是一个可选的版本范围.
npm i \<pkg> -g --force 暴力

Yarn

Yarn 是一个流行的 JavaScript 包管理工具，在 npm 的基础上提供了更快的速度、更稳定的包依赖管理以及更安全的安装流程，以及yarn.lock文件确保依赖的一致性。

Yarn 是由 Facebook、Google、Exponent 和 Tilde 联合创建的替代 npm 的包管理器。
和 npm 类似，Yarn 也支持安装、更新、配置和卸载包。通过 yarn add 安装依赖，yarn upgrade 更新依赖，yarn remove 卸载依赖等。
特点：
引入了 yarn.lock 文件，保证团队成员之间安装的依赖版本相同。
并行安装方式，提高了安装速度。
提供了离线模式，能够重新安装已下载的包，无需互联网连接。
更可读的输出信息。

修改 Yarn 源
Yarn 默认使用 https://registry.yarnpkg.com 作为它的包仓库源。在某些情况下，你可能需要修改源地址，比如当你需要更快的下载速度或者是使用私有的npm仓库时。以下是如何修改 Yarn 源的方法：
- 临时使用其他源
  在添加或更新依赖项时，可以通过 --registry 标志指定其他源，这是一种临时的修改方式：
  - yarn add [package-name] --registry https://registry.npm.taobao.org
    这个命令会从淘宝的 npm 镜像安装包，这个镜像通常在中国大陆访问速度较快。
- 永久修改源
  你可以通过修改全局配置永久地改变 Yarn 源：
  - yarn config set registry https://registry.npm.taobao.org
    这条命令会更新全局 yarn 配置，之后所有的包都会从这个新的源地址安装。

Yarn 常用命令

以下是一些常用的 yarn 命令：

初始化新项目:
yarn init

添加一个依赖包:
yarn add [package-name]

添加一个开发依赖包:
yarn add [package-name] --dev

移除一个依赖包:
yarn remove [package-name]

安装所有依赖:
yarn # 或者 yarn install

升级依赖包:
yarn upgrade [package-name]

列出项目的依赖:
yarn list

运行定义在 package.json 中的脚本:
yarn run [script-name]

清除本地缓存:
yarn cache clean

全局添加包:
yarn global add [package-name]

全局移除包:
yarn global remove [package-name]

注意
使用 yarn 命令时，如果你已经修改了源，确保新的源是可靠和安全的，因为安装恶意软件包可能会危害你的系统安全。
如果你在一个团队中工作，确保与你的团队成员协调源的修改，因为这可能会影响他们的开发环境。

pnpm

pnpm 是一种包管理器，它是 npm 和 Yarn 的一个替代品，专为Node.js应用程序设计。pnpm 的核心特性是它提供了一种更高效的方式来处理依赖关系，并且减少了磁盘空间的使用。

以下是 pnpm 的一些关键特性：

节省空间的节点模块结构：pnpm 使用一个硬链接和符号链接的组合来节省磁盘空间。相同版本的一个包在磁盘上只保存一份副本，而 npm 和 Yarn 在每个项目中都会有重复的副本。
快速安装速度：由于 pnpm 的结构设计，很多操作都比传统的 npm 更快，特别是在安装时重复使用已下载包的情况下。
严格的依赖关系处理：pnpm 通过创建一个类似沙盒的环境来确保项目只能访问其直接声明的依赖，这有助于避免意外使用未声明的依赖项。
可重复的安装：pnpm lockfile 类似于 npm 的 package-lock.json 或 Yarn 的 yarn.lock，确保依赖项的版本在不同环境中保持一致，从而确保可重复性和一致性。
支持多种安装方案：pnpm 支持多种安装方案，例如 monorepo（一个仓库中包含多个包或项目）。
兼容性：pnpm 在大多数情况下兼容 npm 的生态系统，这意味着使用 npm 的项目大多可以无痛切换到 pnpm。

要开始使用 pnpm，你通常需要全局安装它，可以通过现有的 npm 或 Yarn 来安装：

npm install -g pnpm 或者 yarn global add pnpm

然后，你可以像使用 npm 那样使用 pnpm 命令来安装依赖项、管理项目等：

pnpm常用指令

安装所有依赖项:
pnpm install 或简写为: pnpm i

添加一个新的依赖项:
pnpm add <package-name>

添加开发时依赖项 (devDependencies):
pnpm add <package-name> --save-dev 或简写为: pnpm add <package-name> -D

全局安装一个包:
pnpm add -g <package-name>

更新项目中的所有依赖项:
pnpm update

更新特定的依赖项:
pnpm update <package-name>

移除一个依赖项:
pnpm remove <package-name>

运行一个npm脚本:
pnpm run <script-name>
例如，如果你的package.json中有一个测试脚本，你可以使用pnpm run test来执行它。

列出已安装的包:
pnpm list

查看某个特定包的详情:
pnpm list <package-name>

创建一个新的或更新现有的pnpm-lock.yaml文件,这个文件保证了依赖项的确定性安装:
pnpm lockfile

查看一个包的信息:
pnpm info <package-name>

处理多包仓库 (Monorepo)，pnpm支持工作区(workspace)，以下是与工作区相关的命令：

在工作区根目录安装所有包的依赖项:
pnpm install

在特定的工作区包中添加依赖项:
pnpm add <package-name> --filter <workspace-package-name>

查看当前的 依赖源（registry）配置
pnpm config get registry

修改 pnpm 的依赖源
pnpm config set registry https://registry.npm.taobao.org
或者 pnpm 使用 .npmrc 或 .pnpmrc 配置文件来存储配置信息。
.npmrc 文件里 registry=https://registry.npm.taobao.org

依赖项

生产依赖是在生产环境中应用运行时所需的。它们都是在运行时需要的库。例如，UI组件库（如antd）、数据处理库（如lodash）、图表库（如echarts）和react等。
开发依赖仅在开发过程中需要，例如构建工具、测试框架、类型定义文件等。@types包通常是TypeScript类型定义文件，它们仅在开发过程中需要，因此它们应该是开发依赖（devDependencies）。此外，代码格式化工具（如prettier）、CSS预处理器（如sass）和其他用于开发的工具也应该列在开发依赖中。
检查依赖项的依赖：
第三方库本身也可能有依赖项。使用npm ls <package-name>或yarn why <package-name>可以帮助你查看为什么某个包被安装，以及它的依赖树。
这将显示该包的版本，以及哪些其他包依赖于它。

npm 和 Yarn 的比较

速度：Yarn 通常比 npm 更快，因为它并行执行操作，并且缓存了每个下载过的包，不需要每次都从网络上下载。
一致性：两者都通过锁文件来确保依赖的一致性，但 Yarn 的 yarn.lock 文件是自动生成和更新的，而在 npm 中，需要运行 npm shrinkwrap 命令来生成 npm-shrinkwrap.json（或使用 package-lock.json）。
用户界面：Yarn 提供了更简洁和用户友好的命令行界面。
网络性能：Yarn 通过队列请求、重试失败的请求和并行获得资源来优化网络利用率。
安全性：Yarn 在执行包脚本时提供了更严格的安全性措施。
随着 npm 的发展，尤其是 npm 5 和 6 的发布，npm 的许多性能和功能已经得到了显著提升，因此两者之间的差距已经缩小。选择哪个包管理器往往取决于个人喜好或项目要求。

npm yarn pnpm 对比

性能和空间效率

pnpm：优化了性能和空间使用。通过硬链接和符号链接存储依赖项，它在多个项目中复用相同的包版本，从而减少磁盘空间的占用。安装速度通常比npm和Yarn快。
npm：性能自npm@5以来有所提升，特别是引入package-lock.json后，但通常认为它在安装时间和磁盘空间使用方面不如pnpm和Yarn。
Yarn：最初以其比npm更快的性能著称。Yarn的v2版本（特别是Plug’n’Play功能）进一步提高了性能和空间效率。

功能和特性

pnpm：提供严格的依赖隔离，避免了未声明的依赖项被意外使用的情况。它对Monorepo有原生支持，并且提供了一些独特的功能，比如过滤器，这在处理大型项目和多包仓库时特别有用。
npm：作为Node.js的官方包管理器，提供了广泛的功能和最大的包生态系统。它的缺点是在处理多包仓库时需要依赖额外工具，如lerna。
Yarn：提供了Workspaces、Plug’n’Play (PnP) 和其他一些独特的特性，比如自动的license检查和更细粒度的依赖管理控制。Yarn的Workspaces提供了对Monorepo的良好支持。

社区和生态系统

pnpm：虽然是三者中最新的，但它的社区正在快速增长，许多大型项目和公司开始采用它。文档和社区支持正在不断改进。
npm：拥有最大的用户基础和最广泛的包生态系统。几乎所有的Node.js包都可以在npm仓库中找到，社区支持非常广泛。
Yarn：由Facebook推动并得到广泛支持，尤其是在前端社区中。Yarn的文档和社区支持也非常强大。

jsDelivr CDN

jsdelivr开源项目的免费 CDN
jsDelivr 是一个免费的开源 CDN (内容分发网络) 服务，它允许开发者托管前端项目的静态文件，如 JavaScript 库、jQuery 插件、CSS 框架、字体以及任何其他通过 npm 或 GitHub 发布的项目。jsDelivr 提供了快速、可靠的数据传输，确保用户可以从最近的服务器获取到文件，从而减少加载时间和提升网站性能。
- 与 Github 和 NPM 紧密集成，能够自动为几乎每个开源项目提供可靠的 CDN 服务。
- 提供稳定的 CDN，可以在具有大量流量的热门网站的生产中使用。没有带宽限制或高级功能，任何人都可以完全免费使用。
主要特性和优点包括：
多重CDN提供商: jsDelivr 使用多个 CDN 提供商，包括 Cloudflare、Fastly 和其他，为用户提供最佳的性能和冗余。
自动化的负载均衡: 它通过实时的负载均衡技术自动将用户请求转发到最快的CDN。
版本控制: 开发者可以指定所需资源的确切版本，也可以使用版本范围或请求最新版本。
npm和GitHub支持: 除了可以从 npm 加载包，jsDelivr 还可以直接从 GitHub 仓库加载文件，使得它对于开源项目特别有用。
缓存和持久性: 提供长期的缓存，甚至在原始文件已从 npm 或 GitHub 删除后，仍然可以从 CDN 访问。
无需注册: 使用 jsDelivr 不需要注册账户或进行设置，只需通过 URL 构建相应的链接就可以开始使用。
文件合并: 可以在单个 HTTP 请求中合并多个文件，减少请求数量。

举一个例子

如果你想要通过 jsDelivr 加载 jQuery 的最新版本，你可以使用以下链接：
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
如果你想要从 GitHub 加载文件，可以这样做：
<script src="https://cdn.jsdelivr.net/gh/user/repo@version/file"></script>