前端-包管理器

前端工程化包管理器

• 包管理器是一种工具，它帮助开发者管理项目中的库和依赖项，如安装、更新、配置和卸载。在 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）的包管理。

1. 模块管理（安装和卸载）

   • 安装在全局环境下和安装在当前项目中
   • 全装在全局：$ npm install xxx --global （$ npm i -g xxx）
   • 安装在本地项目中：$ npm i xxx
     • 把模块设置为开发依赖（开发中）：$ npm i xxx --save-dev
     • 把模块设置为生产依赖（部署到服务器）：$ npm i xxx --save

2. 安装在全局和本地的区别

   • 安装在全局后对任何项目都有作用（也有可能导致版本冲突），但是只能基于命令的方式管理，不能基于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"
      }
      ```
     1
     2
     3
     4
     5
     6
     7
     8

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 暴力
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Yarn

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

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

1. 修改 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 命令时，如果你已经修改了源，确保新的源是可靠和安全的，因为安装恶意软件包可能会危害你的系统安全。
如果你在一个团队中工作，确保与你的团队成员协调源的修改，因为这可能会影响他们的开发环境。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

依赖项

• 生产依赖是在生产环境中应用运行时所需的。它们都是在运行时需要的库。例如，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 的许多性能和功能已经得到了显著提升，因此两者之间的差距已经缩小。选择哪个包管理器往往取决于个人喜好或项目要求。

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>
  1
  2
  3
  4

jsDelivr 的这些特点使它成为开发者在部署网站或 web 应用时非常流行和有价值的资源。由于其对开源项目的强大支持，它尤其适合小型项目和个人开发者。