21 · CI/CD 与前端质量门禁

目标：把 lint / typecheck / test /（可选）bundle 预算挂进流水线；monorepo 下会用 filter；失败即阻断合并。

1. 背景与目标

本地能跑不等于主分支干净。质量门禁 = 合并前自动验收，减少「我机器上好的」。

2. 核心概念

门禁	作用
lint	风格与基础错误
typecheck	TS 契约
unit / component test	逻辑与组件回归
e2e（可选/夜间）	关键路径
build	确保能打包
bundle budget（可选）	体积不偷偷涨

Journal 根脚本已有 pnpm test、--filter 等——CI 只需调用同一套命令。

PR → install → lint → typecheck → test → build →（通过才可合并）

3. 最小实践

GitHub Actions 示意：

# 概念示意
jobs:
  quality:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: pnpm
      - run: pnpm install
      - run: pnpm --filter client exec vue-tsc --noEmit # 按项目实际
      - run: pnpm test
      - run: pnpm build:h5

Monorepo：改 admin 时可用 path filter 只跑相关 job，省时间；共享包变更要跑下游应用。

4. 踩坑与取舍

1. 门禁太慢：人会绕过；拆并行、缓存依赖。
2. 只装不测：CI 变绿装饰。
3. 本地脚本与 CI 不一致：一个 package.json script 当唯一入口。
4. E2E 全挂 PR：太脆；PR 跑 P0，全量夜间跑。

5. 验收清单

• [ ] 列出本项目「合并前必须绿」的命令清单
• [ ] CI 或本机 pre-push 至少跑 test + build 之一
• [ ] 理解 monorepo filter 与「共享包变更影响面」
• [ ] （可选）加一条体积或覆盖率阈值意识（对照仓库 QA 文档）

6. 下一步

→ 22 · 跨端进阶：小程序与 uni-app 对照

参考链接

• https://docs.github.com/en/actions
• 本仓库根 package.json scripts、AGENTS.md 测试命令