Build 阶段工具 ¶

1. 前端项目构建工具介绍 ¶

前端项目的依赖管理与构建，核心围绕 npm（Node 官方工具）和 pnpm（高效衍生工具）展开，二者均支持 Vue、React、Angular 等主流前端框架，可根据项目规模、团队习惯及构建效率需求选择。

这里选择 pnpm 作为项目的依赖管理与构建工具（兼容 npm 生态，且解决了 npm 依赖冗余、安装慢的问题），需提前配置 Node 环境及私有仓库（如 Nexus npm 仓库）。

需要注意的地方：

pnpm 依赖 Node.js 运行，需先安装对应版本的 Node（建议 Node 16+，匹配主流前端框架要求）；
若使用 Jenkins 构建，需在 Jenkins 服务器上安装 Node 和 pnpm，并配置环境变量。

pnpm 介绍 ¶

pnpm 是基于 npm 改进的高效包管理工具，核心优势是 “节省磁盘空间 + 加速安装”：

采用 “全局 store 缓存 + 硬链接 / 符号链接” 机制，相同依赖仅存储一份，避免 npm 中 node_modules 冗余问题；
支持增量安装（仅下载新依赖）、并行构建，大型前端项目安装速度比 npm 快 2-3 倍；
完全兼容 npm 生态：可直接使用 npm 仓库、package.json 配置及 npm 命令，学习成本低；
自带工作区（monorepo）支持，适合多模块前端项目（如微前端）的依赖管理。

2. 安装 Node.js（前置依赖） ¶

前端工具（npm/pnpm）均依赖 Node.js 环境，需先完成 Node 安装与配置。

1. 下载并解压 Node.js ¶

# 进入临时目录
cd /tmp
# 下载 Node.js 18.x 稳定版（Linux x64，可根据系统替换链接，官网：https://nodejs.org/）
wget https://nodejs.org/dist/v18.20.3/node-v18.20.3-linux-x64.tar.xz
# 解压到 /usr/local 目录
tar -xJvf node-v18.20.3-linux-x64.tar.xz -C /usr/local/
# 重命名目录（简化后续配置）
mv /usr/local/node-v18.20.3-linux-x64 /usr/local/node-18.20.3

2. 配置 Node 环境变量 ¶

# 1. 编辑全局环境变量文件
vim /etc/profile

# 2. 在文件末尾添加以下内容（指定 Node 安装路径）
export NODE_HOME=/usr/local/node-18.20.3
export PATH=$NODE_HOME/bin:$PATH

# 3. 加载环境变量（立即生效）
source /etc/profile

3. 验证 Node 安装 ¶

# 查看 Node 版本（需显示 18.20.3 左右，与下载版本一致）
node -v
# 查看内置 npm 版本（Node 自带 npm，无需单独安装）
npm -v

3. 安装 pnpm ¶

基于已安装的 Node，通过 npm 全局安装 pnpm（简单高效，且可指定版本）。

1. 全局安装 pnpm ¶

# 安装最新稳定版 pnpm（若需指定版本，可加 @版本号，如 pnpm@8.15.0）
npm install -g pnpm

2. 配置 pnpm 环境变量（可选，若安装后无法直接调用） ¶

# 1. 查看 pnpm 全局安装路径（通常在 Node 的 bin 目录下）
npm root -g
# 输出示例：/usr/local/node-18.20.3/lib/node_modules

# 2. 若 pnpm 不在 PATH 中，补充环境变量（编辑 /etc/profile）
vim /etc/profile
# 添加：export PATH=$PATH:/usr/local/node-18.20.3/lib/node_modules/pnpm/bin

# 3. 重新加载环境变量
source /etc/profile

3. 验证 pnpm 安装 ¶

# 查看 pnpm 版本（需显示正常版本号，如 8.15.0）
pnpm -v

4. pnpm 配置（对接 Nexus 私服） ¶

前端项目若需从私有仓库（如 Nexus 的 npm-group 仓库）拉取依赖，需配置 pnpm 的仓库地址，避免直接访问公网。

1. 备份默认配置（可选，便于回滚） ¶

# 查看 pnpm 配置文件路径（全局配置文件）
pnpm config get global-config
# 示例路径：/usr/local/node-18.20.3/etc/npmrc
# 备份配置文件
cp /usr/local/node-18.20.3/etc/npmrc /usr/local/node-18.20.3/etc/npmrc.bak

2. 配置 Nexus npm 私服地址 ¶

# 方式 1：全局配置（所有前端项目生效）
pnpm config set registry http://192.168.3.40:8081/repository/npm-group/

# 方式 2：项目级配置（仅当前项目生效，进入项目根目录执行）
echo "registry = http://192.168.3.40:8081/repository/npm-group/" > .npmrc

3. 处理私服认证（若 Nexus 需账号密码） ¶

若 Nexus 私服设置了访问权限，需在配置中添加认证信息（编辑项目根目录 .npmrc）：

vim .npmrc
# 添加以下内容（替换为实际账号密码或 Token）
//192.168.3.40:8081/repository/npm-group/:username=你的Nexus账号
//192.168.3.40:8081/repository/npm-group/:password=你的Nexus密码
# 或用 Token 认证（更安全）
//192.168.3.40:8081/repository/npm-group/:_authToken=你的Nexus认证Token

4. 验证私服配置 & 安装依赖 ¶

# 1. 查看当前 pnpm 仓库配置（确认已指向 Nexus 私服）
pnpm config get registry

# 2. 进入前端项目根目录，安装依赖（验证私服是否可用）
cd /path/to/your/frontend-project
pnpm install --verbose  # --verbose 查看详细日志，确认依赖从私服拉取

5. 前端构建产物：dist 目录解析 ¶

前端项目通过 pnpm run build 构建后，会在项目根目录生成 dist 目录（默认名称，可在构建配置中修改），包含所有可部署的静态资源。其核心特点与内容如下：

1. 产物用途 ¶

dist 目录是前端项目的 “最终交付物”，用于部署到 Nginx、Apache 或云服务（如阿里云 OSS、AWS S3），用户访问时加载的就是 dist 中的静态资源。

2. 内容结构（以 Vue 项目为例） ¶

dist/
├── index.html          # 入口 HTML 文件（所有页面的入口，通过路由加载组件）
├── css/                # 编译后的 CSS 文件（已压缩、去重，可能含 hash 防止缓存）
│   └── app.123abc.css
├── js/                 # 编译后的 JS 文件（已混淆、压缩，含业务代码和依赖库）
│   ├── app.456def.js    # 业务代码
│   └── vendor.789ghi.js # 第三方依赖（如 Vue、React 核心库）
└── static/             # 静态资源（图片、字体、图标等，已处理为优化格式）
    ├── img/
    │   └── logo.png
    └── font/
        └── iconfont.ttf

3. 关键特性 ¶

优化处理：JS/CSS 已压缩、混淆（减少体积，提高加载速度），图片可能转为 WebP 等高效格式；
缓存控制：文件名含 hash（如 app.123abc.css），更新代码后 hash 变化，避免浏览器缓存旧资源；
跨环境适配：通过 .env 配置文件，可生成不同环境（开发 / 测试 / 生产）的 dist 产物（如不同的接口地址）。

4. 构建命令示例 ¶

# 执行构建（基于项目 package.json 中的 "build" 脚本）
pnpm run build

# 构建后查看 dist 目录大小（确认产物完整性）
du -sh dist/