第 9 章 · 前端工程化

做产品必须工程化：git 管版本、npm 管依赖、webpack/vite 打包、部署与规范。

9.1 git：版本管理

git init                          # 初始化仓库
git add src/ index.html           # 暂存指定文件
git commit -m "feat: 首页布局"    # 提交
git checkout -b feat/login        # 新分支
git merge feat/login              # 合并
git push origin main              # 推送到远程

概念	作用
工作区 / 暂存区 / 仓库	改文件 → add 暂存 → commit 入仓
分支 branch	并行开发互不干扰，主干保持稳定
提交 commit	一次可回溯的快照，写清楚「为什么」
远程 remote	协作与备份（GitHub/GitLab）

• 约定式提交（feat:/fix:/docs:）让历史可读，也是自动生成 changelog 的前提。

9.2 npm：依赖管理

package.json 声明项目与依赖，node_modules 存实际安装的包：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": { "vue": "^3.4.0" },
  "devDependencies": { "vite": "^5.0.0" }
}

npm install          # 按 package.json 安装全部依赖
npm install vue      # 新增依赖
npm run dev          # 跑脚本

• dependencies 是运行时依赖，devDependencies 是构建/测试依赖（不随产物发布）。
• ^3.4.0 是 semver 范围：允许 3.x 内的小版本/补丁更新。

对比：npm 默认、生态最兼容；yarn 差异已小；pnpm 硬链接+内容寻址去重，最快最省磁盘且严格隔离。锁文件各不同。

9.3 打包工具：webpack vs vite

打包工具把 ESM 模块、图片、CSS 打包+压缩成浏览器能高效加载的静态文件：

// vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({ plugins: [vue()] });

	webpack	vite
构建方式	全量打包成 bundle	开发时原生 ESM，按需编译
冷启动	慢（全量）	极快（浏览器原生加载模块）
HMR 热更新	随项目变大变慢	极快（只换改动模块）
生产构建	成熟稳定	底层用 Rollup
生态/兼容	最全、最老	现代浏览器（ESM）

对比：webpack 全量打包、兼容最好但冷启动慢；vite 开发期不打包、原生 ESM 按需加载，冷启动和热更新快，生产交给 Rollup。新项目多选 vite。

9.4 构建与部署

源码 ──build──> dist/（压缩、哈希命名的静态产物）──部署──> 静态服务器 / CDN

• 产物文件名带内容哈希（index.9f3a.css），内容不变则文件名不变，配合强缓存（第 6 章）实现「改了才重新下载」。
• 常见部署：GitHub Pages / Vercel / Nginx 静态托管；前端纯静态时，本质就是「把 dist 放到能访问的 URL 下」。
• CI/CD：push 触发流水线，自动 npm run build + 部署。

9.5 代码规范

• ESLint（静态检查）+ Prettier（格式化）+ TypeScript（类型）三件套，统一风格、提前抓错。
• 提交前用 husky + lint-staged 只检查本次改动的文件，把问题挡在 commit 之前。