前端工程化¶

包管理器¶

• npm Node.js 自带，生态最大。
• pnpm 硬链接节省磁盘空间，严格依赖隔离，推荐。
• yarn Facebook 出品，Berry 版本支持 PnP。

# 常用命令对比
npm install <pkg>          # pnpm add <pkg>
npm install -D <pkg>       # pnpm add -D <pkg>
npm run <script>           # pnpm <script>
npm ci                     # pnpm install --frozen-lockfile

构建工具¶

Vite¶

npm create vite@latest my-app -- --template react-ts

• 开发环境用原生 ESM，冷启动极快。
• 生产环境用 Rollup 打包。
• 支持 HMR（热模块替换）。
• 配置文件 vite.config.ts。

Webpack¶

老牌打包器，配置复杂但生态完善：

• entry 入口文件。
• output 输出配置。
• loader 处理非 JS 文件（css-loader、babel-loader）。
• plugin 扩展功能（HtmlWebpackPlugin、MiniCssExtractPlugin）。
• mode development / production。

esbuild / SWC / Turbopack¶

• esbuild Go 写的极速打包器，Vite 底层依赖。
• SWC Rust 写的编译器，替代 Babel，Next.js 默认使用。
• Turbopack Rust 写的增量打包器，Webpack 继任者。

ESLint¶

代码静态检查工具，发现潜在问题。

// eslint.config.js (Flat Config)
import js from "@eslint/js";
import ts from "typescript-eslint";

export default [
    js.configs.recommended,
    ...ts.configs.recommended,
    {
        rules: {
            "no-unused-vars": "warn",
            "no-console": "warn",
        },
    },
];

Prettier¶

代码格式化工具，与 ESLint 配合使用。

// .prettierrc
{
    "semi": true,
    "singleQuote": true,
    "tabWidth": 2,
    "trailingComma": "es5",
    "printWidth": 100
}

Git Hooks¶

• Husky 在 git hook 时执行脚本。
• lint-staged 只对暂存区文件运行 lint/format。

// package.json
{
    "lint-staged": {
        "*.{ts,tsx}": ["eslint --fix", "prettier --write"],
        "*.{css,json,md}": ["prettier --write"]
    }
}

Monorepo¶

多个项目共享一个仓库：

• Turborepo Vercel 出品，增量构建，任务编排。
• pnpm workspaces 内置支持，pnpm-workspace.yaml 定义。
• Nx 功能最全，支持多种语言。

monorepo/
├── pnpm-workspace.yaml
├── packages/
│   ├── shared/        # 共享库
│   └── utils/         # 工具函数
└── apps/
    ├── web/           # 前端应用
    └── api/           # 后端应用

测试¶

• Vitest Vite 生态的测试框架，兼容 Jest API。
• Jest 最流行的 JS 测试框架。
• Testing Library 组件测试，模拟用户行为。
• Playwright / Cypress E2E 端到端测试。
• MSW (Mock Service Worker) Mock API 请求。

CI/CD¶

常见流程：push → lint → test → build → deploy。

• GitHub Actions 最常用。
• Vercel / Netlify 自动部署。
• Docker 容器化部署。