工程化之包管理器npm，一次说明白前端在中的使用npm（Node Package Manager）是一个广泛使用的包管理

npm（Node Package Manager）是一个广泛使用的包管理工具，主要用于JavaScript和Node.js的开发。它在前端开发中发挥着重要的作用，下面是npm在前端中的一些主要涉及：npmjs官网、npmjs包管理网站、npmjs中文官网、npmjs中文网站包管理

npm是什么

它是世界上最大的软件注册表。由三个独立的部分组成：

网站
注册表（registry）
命令行工具 (CLI)

网站是开发者查找包（package）、设置参数以及管理 npm 使用体验的主要途径。

注册表 是一个巨大的数据库，保存了每个包（package）的信息。

CLI 通过命令行或终端运行。开发者通过 CLI 与 npm 打交道。

npm在前端的涉及方面

1.包管理：

npm允许开发者轻松地安装、更新和管理项目所依赖的库和工具。通过命令行，可以轻松安装如React、Vue、Angular等前端框架和库。

2.版本控制：

npm提供版本控制功能，允许开发者指定要使用的库的版本，确保项目依赖的一致性。通过package.json文件，可以记录项目依赖的版本，并通过npm install命令自动安装。

3.脚本管理：

在package.json中，可以定义项目的各种脚本命令，例如启动开发服务器、运行测试、构建项目等。开发者可以使用npm run [script-name]来执行这些脚本。

4.生态系统：

npm拥有丰富的生态系统，提供了数以万计的开源包，开发者可以直接使用这些包来扩展项目功能，而无需从头开始编写代码。

5.模块化开发：

npm允许开发者将代码拆分成独立的模块，这样可以提高代码的可维护性和复用性。通过npm，可以方便地管理这些模块的依赖关系。

6.CLI 工具：

许多前端工具和框架（如Webpack、Babel、Vue CLI等）都是通过npm安装和管理的，提供了命令行界面（CLI）来帮助开发者进行项目构建和开发流程。

7.协作与共享：

开发者可以将自己编写的包发布到npm注册表，从而共享给其他开发者。这样促进了社区的协作和共同发展。

8.安装本地和全局包：

npm可以安装本地包（仅在当前项目中使用）和全局包（在系统范围内可用），方便开发者根据需求进行管理。

npm安装

1. 安装Node.js与npm

首先，确保你的计算机上已安装Node.js。npm是Node.js的一部分，因此安装Node.js时会自动安装npm。可以从Node.js官网下载并安装Node.js。

2. 初始化项目

如果你需要在一个新的项目中使用npm，首先在项目目录中初始化一个新的npm项目：

npm init

此命令会提示你填写一些项目信息，最终生成一个package.json文件。你也可以使用npm init -y命令快速生成一个默认的package.json文件。

3. 安装包

4.安装生产环境依赖

如果你要安装一个库并将其添加到生产环境依赖中，可以使用：

# --save 简写 -S 或者默认不写
npm install <package-name>

例如，安装React：

npm install react

5.安装开发环境依赖

如果你要安装一个库仅用于开发环境（如测试框架、构建工具等），可以使用：

# --save-dev 也可以简写D
npm install --save-dev <package-name>

例如，安装Webpack作为开发依赖：

npm install --save-dev webpack webpack-cli

6. 查看已安装的包

你可以通过以下命令查看项目中的已安装包：

npm list --depth=0

这将仅显示顶级依赖（不展示其依赖的依赖）。

7. 卸载包

如果你需要卸载一个已安装的包，可以使用：

npm uninstall <package-name>

例如，卸载React：

npm uninstall react

8. 更新包

要更新项目中所有依赖包到最新版本，可以使用：

npm update

或者，你也可以单独更新某个包：

npm update <package-name>

9. 查看npm版本

要查看已安装的npm版本，可以使用：

npm -v

npm常用命令

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

npm init：初始化一个新的npm项目，会生成一个package.json文件。
npm install <package>：安装指定的库，并将其添加到项目的依赖中。
npm install --save-dev <package>：安装指定的库作为开发依赖，适用于开发环境。
npm uninstall <package>：卸载指定的库。
npm update：更新项目中的所有依赖包到最新版本。
npm run <script>：执行在package.json中定义的脚本。
npm cache clean --force：清除 npm 缓存的命令。
npm config set registry <registry-url>：设置 npm 源。
npm config get registry：获取当前 npm 源
npm config set registry https://registry.npmjs.org/：更改 npm 源。
npm config list：### 列出所有 npm 配置。
npm config delete registry：重置为默认源，如果你想重置 npm 源为官方默认源。

特别的 npm i 和 npm ci

1. `npm install`

功能：
- 安装 package.json 中列出的所有依赖项。
适用场景：
- 在开发过程中，通常在新增或更新依赖时使用。
行为：
- 如果 node_modules 目录不存在，或者有新依赖项，它会安装所有依赖项。
- 会进行依赖版本的解析，可能根据语义化版本控制（如 ^ 或 ~）安装最新的符合条件的版本。
- 如果 package-lock.json 文件存在，可能会更新它以反映当前安装的依赖版本（前提是你有更改依赖项）。

2. `npm ci`

功能：
- 使用 package-lock.json 文件完全安装依赖项。
适用场景：
- 通常在持续集成（CI）环境中使用，以确保快速、可靠地安装依赖，确保与之前安装的版本一致。
行为：
- 必须有一个已存在的 package-lock.json 文件。
- 在安装依赖之前，首先会删除 node_modules 目录，确保没有任何多余的包。
- 将严格按照 package-lock.json 中的版本进行安装，而不会尝试解析或更新其版本。
- 安装速度更快，适合在 CI/CD 流程中能提升构建速度。

小结

npm install 是一个更灵活的命令，适合在开发过程中添加或更新依赖（如果你需要更改或更新依赖，使用 npm install）。
npm ci 是一个更精确的命令，确保依赖环境的一致性，适合在自动化构建和测试环境中使用（如果你需要确保构建的一致性，使用 npm ci）。

3. `npm link`

主要用于在本地开发环境中创建符号链接，以便于开发和调试本地包。下面是 npm link 的详细介绍：

主要作用

开发本地模块：使用 npm link 可以方便地将一个本地模块链接到另一个项目中，方便对模块的开发和调试。
避免重复安装：当你在多个项目中需要使用同一个本地模块时，可以通过链接而不是重复安装，避免版本不一致和安装包的重复。

使用方法

使用 npm link 一般分为两个步骤：

步骤 1：在本地模块中创建链接

在本地模块的根目录中运行以下命令：

npm link

这条命令会在全局 npm 模块目录中创建一个符号链接，指向当前模块。

步骤 2：在目标项目中链接模块

接下来，切换到你想要使用这个本地模块的项目目录中，运行以下命令：

npm link <module-name>

其中 <module-name> 是本地模块的名称。执行后，目标项目将会创建一个到本地模块的符号链接。

假设你有一个本地模块 my-module，你可以按如下步骤进行操作：

在 my-module 目录中运行：
```
cd path/to/my-module
npm link
```
然后，在需要使用该模块的项目中运行：
```
cd path/to/your-project
npm link my-module
```

撤销链接

如果你想撤销链接，可以在目标项目中使用以下命令：

npm unlink <module-name>

同时，如果你希望在本地模块中删除全局链接，可以运行：

npm unlink

注意事项

npm link 主要用于本地开发和调试，适合开发者在多个项目之间共享本地的模块。
使用符号链接时，注意版本管理，确保本地模块的更新不会影响到依赖它的项目。

npm配置文件

npm的配置文件主要指package.json，它在前端项目中扮演着重要角色。其主要功能：

项目元信息：记录项目名称、版本、描述、作者等信息。
依赖管理：
- dependencies：记录项目在生产环境中所需的库。
- devDependencies：记录项目在开发环境中所需的库。
脚本定义：可以定义自定义脚本来快捷地执行特定的命令，例如构建、测试等。
配置项：可以记录一些项目的配置项，例如eslint配置、babel配置等等。

package.json 和 package-lock.json 是 npm 在项目管理中使用的两个重要文件，各自有不同的作用。下面详细介绍它们的功能和用途：

1. package.json

package.json 是一个项目的元数据文件，主要用于描述项目及其依赖关系。它包含了以下信息：

项目基本信息：
- name：项目名称。
- version：项目版本。
- description：项目描述。
- author：作者信息。
- license：许可协议。
依赖管理：
- dependencies：项目在生产环境中所需的依赖包及其版本。
- devDependencies：项目在开发环境中所需的依赖包（如测试工具、构建工具等）。
脚本：
- scripts：定义自定义脚本命令，便于执行常用的命令，如启动应用、运行测试等。
其他配置：
- 还可以包含一些其他的配置项，如入口文件、homepage、bugs等。

示例package.json文件：

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "A simple project",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "jest"
  },
  "dependencies": {
    "react": "^17.0.2",
    "axios": "^0.21.1"
  },
  "devDependencies": {
    "webpack": "^5.52.0"
  },
  "author": "Your Name",
  "license": "ISC"
}

2. package-lock.json

package-lock.json 是自动生成【执行npm i就会自动生成】的文件，主要用于锁定项目的依赖关系。其作用包括：

确保一致性：
- package-lock.json记录了每个依赖包的确切版本，以及它们的依赖关系树。这确保了团队中每个开发者及持续集成环境中安装的依赖包版本完全一致，避免了因版本升级导致的潜在问题。
加速安装：
- 当运行npm install时，npm会首先检查package-lock.json，如果该文件存在，npm将根据其中的信息安装依赖包，而不是重新解析所有的版本，这可以加快安装速度。
安全性：
- 通过锁定依赖关系，可以及时发现并修复安全漏洞，提高项目的安全性。

示例package-lock.json文件（部分）：

{
  "name": "my-project",
  "version": "1.0.0",
  "lockfileVersion": 1,
  "dependencies": {
    "react": {
      "version": "17.0.2",
      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
      "integrity": "sha512-...",
      "dev": false,
      "engines": {
        "node": ">=6.0.0"
      },
      "dependencies": {
        "object-assign": "^4.1.1"
      }
    },
    ...
  }
}

3. `.npmrc`文件

.npmrc 文件是 npm 的配置文件，用于管理 npm 的设置和参数。它可以在项目级（项目根目录下）、用户级（用户主目录下）和全局级（全局配置）存在。该文件的主要作用是自定义 npm 的行为和安装方式。

主要作用

配置 npm 行为：可以通过 .npmrc 文件设置 npm 的各种选项，以便更好满足项目需求。
管理源：可以指定 npm 包的安装源，例如使用公司内部的私有 npm 源。
身份验证：可以设置身份验证令牌，以便访问私有模块或仓库。
提高性能：通过设置一些配置参数来优化 npm 的安装速度和效率。

常用配置属性

以下是一些常见的 .npmrc 配置属性及其作用：

registry：
- 设置 npm 包的注册表地址。默认是 https://registry.npmjs.org/。
```
registry=https://registry.npmjs.org/
```
always-auth：
- 是否始终要求在所有请求中发送身份验证信息，如果使用私有仓库时需要设置为 true。
```
always-auth=true
```
scope：
- 用于指定 npm 包的作用域，通常用于组织和私有包。
```
scope=@my-org
```
authToken：
- 设置用于身份验证的访问令牌，以便访问私有包。
```
//registry.npmjs.org/:_authToken=YOUR_AUTH_TOKEN
```
proxy 和 https-proxy：
- 用于设置代理服务器，以便通过代理访问 npm：
```
proxy=http://proxy-server:8080
https-proxy=https://proxy-server:8080
```
cache：
- 设置 npm 的缓存目录，控制 npm 安装包的缓存位置。
```
cache=/path/to/npm/cache
```
save-exact：
- 将依赖包的版本信息保存为精确版本，而不是使用波浪号或插入号表示的版本范围。
```
save-exact=true
```
silent：
- 设置为 true 时，npm 会尽量减少日志输出，适合在 CI/CD 环境中使用。
```
silent=true
```
scripts-prepend-node-path：
- 控制 node 可执行文件的路径，以确保可以在运行 npm 脚本时找到 node。
```
scripts-prepend-node-path=auto
```

小结

package.json 是项目管理的主要配置文件，记录项目的基本信息、依赖和脚本等。
package-lock.json 则是用于锁定依赖关系的文件，确保一致性和加速安装。
.npmrc 文件为 npm 提供了灵活的配置选项，帮助开发者根据需要定制 npm 的行为和安装方式。

发布一个npm包的流程

1. 准备环境

确保已经在你的计算机上安装了 Node.js 和 npm。可以通过以下命令检查版本：

node -v
npm -v

2. 创建本地包

在你的项目目录下，使用以下命令初始化一个新的 npm 项目：

npm init

这个命令会提示你输入一些信息，如项目名称、版本、描述等，最终会生成一个 package.json 文件。

3. 编写代码

在项目中编写你的代码，并确保它符合 npm 包的结构，通常包括以下几个部分：

主文件（如 index.js）
任何依赖库或工具
README 文件（建议为项目编写一个README.md，阐述使用方法）

4. 测试包

在将包发布到 npm 之前，确保在本地进行充分的测试，确保它能如预期一样工作。这可以通过在本地项目中链接（使用 npm link）进行。

5. 登录 npm 账号

在发布包之前，你需要有一个 npm 账号。如果还没有，可以在 npm官网注册一个新账号。

使用以下命令登录：

npm login

输入你的用户名、密码和邮箱地址。

6. 配置 package.json

确保 package.json 中的以下关键信息正确：

name：你要发布的包的名称，必须是唯一的。
version：包的版本号，遵循语义化版本控制（例如：1.0.0）。
main：指定包的入口文件（如 index.js）。
license：指定包的许可证（如 MIT）。

7. 发布包

使用以下命令将你的包发布到 npm 注册表：

npm publish

如果你使用了 npm init 生成的默认 package.json，并没有更改版本号，npm 会提示你更新版本。

8. 检查和维护包

发布后，你可以通过 npm 网站搜索你的包，确认它已成功发布。在以后，如果需要更新包，可以：

更新代码。
修改 package.json 中的版本号。
运行 npm publish 重新发布。

9. 管理包

如果需要对已发布的包进行管理（例如，删除包或修改公开状态），可以使用以下命令：

删除包（需要管理员权限）：
```
npm unpublish <package-name>
```
更新包的访问权限（如将其设为私有或公共）：
```
npm access public <package-name>
```
--save 和 --save-dev 是 npm 在安装包时使用的命令选项，它们的区别主要在于依赖的类型和用途。以下是具体说明：

额外的 --save 和 --save-dev 解说

--save （简写-S）默认可写可不写生产环境所需依赖

用途：这个选项用于将安装的包添加到项目的生产依赖（dependencies）中。
安装方式：
```
npm install <package-name> --save
```
或者在较新的 npm 版本中可以省略 --save，因为它是默认行为。
应用场景：当你需要在应用运行时使用的库，比如前端框架、后端框架以及其他在生产环境中必要的依赖时，可以使用此选项。

--save-dev （简写-D）开发阶段所需依赖

用途：这个选项用于将安装的包添加到项目的开发依赖（devDependencies）中。
安装方式：
```
npm install <package-name> --save-dev
```
应用场景：当你需要在开发和测试时使用的库，比如构建工具（Webpack、Gulp）、测试框架（Jest、Mocha）或者代码检查工具（ESLint）等，可以使用此选项。

小结

使用 --save 将依赖项添加到 dependencies，适合生产环境需要的库。
使用 --save-dev 将依赖项添加到 devDependencies，适合开发环境使用的库。

在项目中正确分类依赖项有助于管理和优化项目，使其他开发者在安装时能够明确哪些依赖是必需的，而哪些是仅在开发过程中使用的。

总结

好了，内容是偏多点但是都是纯细节干货输出，如果无用请尽快划走，npm的总结到此为止，废话不多，一篇文章即可实现你在前端使用npm的双手自由了！！！欢迎各位大佬点赞收藏整个前端生涯都受用~

工程化之包管理器npm，一次说明白前端在中的使用