用于前端的 GitHub Actions：代码检查、测试与构建
编写工作流 YAML，安装依赖、运行 ESLint、执行 Jest 测试，并在每个拉取请求上构建应用。
用于前端的 GitHub Actions：代码检查、测试与构建 是 CoddyKit 上的免费 Frontend Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。
前端为什么需要 CI？
持续集成会在每次推送和拉取请求时运行测试、代码检查和构建。它能在回归问题进入主分支之前发现它们。任何拥有一名以上开发者的团队都应配置持续集成。
GitHub Actions 基础
工作流是位于 .github/workflows/ 中的 YAML 文件。每个工作流都包含作业，这些作业会由触发器（push、pull_request、schedule）启动。
# .github/workflows/ci.yml
name: CI
on:
push:
branches: [main]
pull_request:
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
cancel-in-progress: true
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with: { node-version: '20' }
- run: npm ci
- run: npm test缓存依赖项
缓存 node_modules（或 pnpm/yarn 缓存），避免每次运行都重新安装。setup-node 内置了缓存支持。
- uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm' # or 'yarn' or 'pnpm'代码检查作业
运行 ESLint 和 Prettier 检查。出现错误时让构建失败。
lint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with: { node-version: '20', cache: 'npm' }
- run: npm ci
- run: npm run lint
- run: npm run format:check测试作业
运行 Vitest 或 Jest。输出覆盖率报告，以便了解测试覆盖情况。
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with: { node-version: '20', cache: 'npm' }
- run: npm ci
- run: npm test -- --coverage
- uses: codecov/codecov-action@v4
with:
files: ./coverage/lcov.info构建作业
构建生产环境包。将其上传为构建产物，供后续部署作业使用。
build:
runs-on: ubuntu-latest
needs: [lint, test]
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with: { node-version: '20', cache: 'npm' }
- run: npm ci
- run: npm run build
- uses: actions/upload-artifact@v4
with:
name: dist
path: dist/
retention-days: 7并行作业
代码检查、测试和类型检查可以并行运行，因为 Actions 会为每个作业使用独立的运行器。使用 needs: 强制规定顺序（让构建在代码检查和测试之后运行）。
类型检查
添加专用的类型检查作业：tsc --noEmit。在运行时之前发现 TypeScript 错误。
typecheck:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with: { node-version: '20', cache: 'npm' }
- run: npm ci
- run: npx tsc --noEmit矩阵测试
在多个 Node 版本或操作系统上并行运行测试作业。
test:
strategy:
fail-fast: false
matrix:
node: [18, 20, 22]
os: [ubuntu-latest, windows-latest, macos-latest]
runs-on: ${{ matrix.os }}
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with: { node-version: ${{ matrix.node }} }
- run: npm ci && npm test条件步骤
使用 if: 仅在满足条件时运行步骤，例如仅在主分支上运行。
- name: Deploy to staging
if: github.ref == 'refs/heads/main'
run: npm run deploy:staging密钥与变量
将 API 密钥和令牌存储在仓库密钥中（Settings → Secrets）。通过 secrets.NAME 访问。绝不要将密钥提交到仓库。
- run: npm run deploy
env:
DEPLOY_TOKEN: ${{ secrets.DEPLOY_TOKEN }}
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}分支保护规则
在 Settings → Branches 中，要求 CI 工作流通过后，才允许合并到 main。再结合必需的代码审查，这就是团队的标准安全措施。
快速检查
GitHub Actions 工作流并发区块中的 cancel-in-progress: true 有什么作用？
回顾：面向前端的 GitHub Actions
工作流 YAML 文件位于 .github/workflows/。推送或 PR 时运行作业。通过 setup-node 缓存 node_modules。标准作业包括：代码检查、类型检查、测试、构建。使用 needs 实现并行运行和顺序控制。使用矩阵进行多版本测试。通过仓库设置管理密钥。分支保护要求 CI 通过后才能合并。使用 cancel-in-progress 去重运行。
用 AI 导师学习 HTML — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 41
- 课程
- 163
常见问题解答
「用于前端的 GitHub Actions：代码检查、测试与构建」课时是免费的吗？
是的 — 「用于前端的 GitHub Actions：代码检查、测试与构建」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。
「用于前端的 GitHub Actions：代码检查、测试与构建」这节课中我会学到什么？
编写工作流 YAML，安装依赖、运行 ESLint、执行 Jest 测试，并在每个拉取请求上构建应用。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Frontend Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「用于前端的 GitHub Actions：代码检查、测试与构建」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Frontend Academy 课中编写并运行代码吗？
能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 用于前端的 GitHub Actions：代码检查、测试与构建
- 部署到 Vercel、Netlify 与 Cloudflare Pages
- 持续集成中的环境变量
- 自动化 Lighthouse 检查