JavaScript 项目的 CI/CD：GitHub Actions

CI/CD 与 GitHub Actions 在 JavaScript 中的入门指南

现代基于 Node.js 的 JavaScript 应用程序开发不仅需要高质量的代码，还需要可靠的交付流程。CI/CD（持续集成/持续部署）是一套实践方法，用于自动化代码的构建、测试和部署。实现 CI/CD 最流行的工具之一是 GitHub Actions，它是 GitHub 平台内置的工作流自动化系统。

本文将详细介绍如何为 JavaScript（Node.js）项目使用 GitHub Actions 配置 CI/CD。您将学习如何创建流水线、运行测试、执行代码检查、构建项目以及自动部署到服务器或云托管平台。无论您是初学者还是希望优化开发流程的经验丰富的工程师，本文都将为您提供帮助。

GitHub Actions 基础：结构与语法

GitHub Actions 基于 YAML 文件运行，这些文件存储在仓库的 .github/workflows 目录中。每个文件定义一个或多个 工作流（workflow），这些工作流根据特定事件触发：推送（push）、拉取请求（pull request）、创建发布（release）等。

工作流的基本结构包括：

• name — 流水线名称；
• on — 触发执行的事件；
• jobs — 一组按顺序或并行执行的任务；
• steps — 每个任务内的步骤（命令、操作）。

来看一个 Node.js 项目的最小示例：

name: Node.js CI

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm ci
      - run: npm test

在这个示例中，我们使用了内置的 actions：actions/checkout 用于克隆仓库，actions/setup-node 用于安装指定版本的 Node.js。命令 npm ci 严格按照 package-lock.json 安装依赖，而 npm test 则运行测试。

配置测试与代码检查

一个高质量的 JavaScript 项目 CI/CD 流水线应包括代码规范检查和自动化测试。下面是一个使用流行工具的扩展示例：ESLint 用于代码检查，Jest 用于测试，Prettier 用于代码格式化。

在项目中添加必要的依赖：

npm install --save-dev eslint jest prettier eslint-config-prettier

创建配置文件 .eslintrc.json：

{
  "env": {
    "node": true,
    "es2021": true,
    "jest": true
  },
  "extends": ["eslint:recommended", "prettier"],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "no-console": "warn",
    "semi": ["error", "always"]
  }
}

现在更新工作流文件：

name: Lint and Test

on:
  push:
    branches: [ main, develop ]
  pull_request:
    branches: [ main ]

jobs:
  quality:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Run linter
        run: npx eslint .

      - name: Check formatting
        run: npx prettier --check .

      - name: Run tests
        run: npm test

      - name: Upload test coverage
```