JavaScript CI/CD 管道：从零开始的 10 步设置指南

如何停止手动部署，不再害怕提交

你是否曾在周五晚上，盯着生产环境想：“嗯，看起来一切正常，但如果我现在运行构建——会不会出问题？”熟悉吗？手动部署就像在没有教练的情况下跳伞：虽然刺激，但往往以惨痛代价收场。

CI/CD 管道就是你的自动安全绳。它会自动构建项目、运行测试、检查代码，如果一切正常——就将更新部署到服务器。再也不会有“哦，我忘了运行构建”或“为什么测试失败了，明明本地运行正常？”的情况。

在本文中，我们将从零开始为 JavaScript 项目设置一个完整的 CI/CD 管道。没有废话，只有真实的代码示例和现成的配置文件。开始吧！

什么是 CI/CD 管道，为什么 JavaScript 开发者需要它

让我们先弄清楚术语，以免混淆。

持续集成 (CI) — 每次提交都会自动检查：代码通过 linter、测试、构建。如果出了问题——你会在 2 分钟内知道，而不是一周后。

持续交付 (CD) — 在所有 CI 检查成功通过后，自动将准备好的代码部署到服务器。

对于 JavaScript 项目，CI/CD 尤其重要。为什么？因为 JS 生态系统有数千个依赖项，它们随时可能更新并破坏你的代码。自动化可以避免这类意外。

我们将要配置的内容

\n
• GitHub Actions — 免费的 CI/CD 工具（适用于大多数项目）
\n
• Linter — 代码风格检查（ESLint）
\n
• 测试 — 自动运行 Jest
\n
• 构建 — 项目构建（Webpack 或 Vite）
\n
• 部署 — 自动上传到服务器或托管平台
\n

步骤 1：准备项目

假设你已经有一个 JavaScript 项目（React、Vue、Node.js 都可以）。如果没有，创建一个简单的测试项目：

mkdir my-ci-cd-project\ncd my-ci-cd-project\nnpm init -y\nnpm install --save-dev jest eslint

在 package.json 中添加基本脚本：

{\n  "scripts": {\n    "test": "jest",\n    "lint": "eslint src/",\n    "build": "webpack --mode production",\n    "deploy": "rsync -avz dist/ user@server:/var/www"\n  }\n}

现在我们有了本地命令，CI/CD 将自动执行它们。

步骤 2：创建 GitHub Actions 工作流

GitHub Actions 是我们管道的大脑。所有操作都由 .github/workflows/ 文件夹中的 YAML 文件管理。

创建文件 .github/workflows/ci-cd.yml：

name: CI/CD Pipeline\n\non:\n  push:\n    branches: [ main, develop ]\n  pull_request:\n    branches: [ main ]\n\njobs:\n  build-and-test:\n    runs-on: ubuntu-latest\n    \n    steps:\n    - uses: actions/checkout@v3\n    \n    - name: Setup Node.js\n      uses: actions/setup-node@v3\n      with:\n        node-version: '18'\n        \n    - name: Install dependencies\n      run: npm ci\n      \n    - name: Run linter\n      run: npm run lint\n      \n    - name: Run tests\n      run: npm test\n      \n    - name: Build project\n      run: npm run build

这里发生了什么？每次推送到 main 或 develop 分支时，GitHub 会启动一个 Ubuntu 虚拟机，安装 Node.js 18，安装依赖项（通过 npm ci 进行干净安装——比 npm install 更快更可靠），用 linter 检查代码，运行测试并构建项目。

如果任何一个步骤失败——管道将停止，你会收到通知。

步骤 3：添加 linter 和测试

ESLint 和 Jest 是 JavaScript 的标准配置。我们来配置它们...