紅寶書第三十六講：持續(xù)集成（CI）配置入門指南

資料取自《JavaScript高級(jí)程序設(shè)計(jì)（第5版）》。
查看總目錄：紅寶書學(xué)習(xí)大綱

一、什么是持續(xù)集成？

持續(xù)集成（CI）就像咖啡廳的“自動(dòng)質(zhì)檢流水線”。代碼每次提交后，自動(dòng)運(yùn)行測試、檢查語法錯(cuò)誤、打包代碼，確保所有改動(dòng)不會(huì)破壞原有功能[[^6]]。

二、三步看懂核心配置流程

flowchart TD
    A[代碼推送至Git倉庫] --> B[觸發(fā)CI流水線]
    B --> C{執(zhí)行任務(wù)}
    C --> D[安裝依賴]
    C --> E[運(yùn)行測試]
    C --> F[編譯打包]
    D --> G[反饋結(jié)果]
    E --> G
    F --> G

三、手把手創(chuàng)建 .github/workflows/ci.yml（以GitHub Actions為例）

name: CI Pipeline

on:  # 觸發(fā)條件（當(dāng)代碼推送到主分支時(shí)觸發(fā)）
  push:
    branches: [ "main" ]

jobs:
  test-and-build:
    runs-on: ubuntu-latest  # 使用最新版Linux系統(tǒng)

    steps:
      - name: 獲取代碼 ??
        uses: actions/checkout@v4

      - name: 安裝Node.js ??
        uses: actions/setup-node@v3
        with:
          node-version: '20'

      - name: 安裝npm包 ??
        run: npm install

      - name: 運(yùn)行單元測試 ??
        run: npm test

      - name: 構(gòu)建項(xiàng)目文件 ??
        run: npm run build

      - name: 上傳構(gòu)建產(chǎn)物 ??
        uses: actions/upload-artifact@v3
        with:
          name: build-output
          path: dist/

四、關(guān)鍵環(huán)節(jié)詳解

1. 監(jiān)控代碼變動(dòng)
   on: push 設(shè)置觸發(fā)條件，每當(dāng)代碼推送到main分支時(shí)啟動(dòng)流水線。

2. 虛擬環(huán)境配置
   runs-on: ubuntu-latest 指定在純凈的Linux環(huán)境執(zhí)行任務(wù)，避免本地環(huán)境差異問題。

3. 依賴安裝
   npm install 自動(dòng)安裝所有依賴（類似首次接手項(xiàng)目時(shí)npm i的操作）。

4. 自動(dòng)化測試
   npm test 執(zhí)行所有測試用例。如果有測試失敗，自動(dòng)停止流程并通過郵件通知（就像考試不及格必須補(bǔ)考）。

5. 構(gòu)建優(yōu)化
   npm run build 生成優(yōu)化后的生產(chǎn)環(huán)境代碼（代碼壓縮、合并等處理）。

6. 產(chǎn)物存檔
   構(gòu)建結(jié)果被打包成build-output.zip保存，可隨時(shí)下載或?qū)雍罄m(xù)部署流程。

五、常見配置場景

目錄：總目錄
上篇文章：紅寶書第三十五講：新手也能懂的靜態(tài)代碼分析指南：ESLint vs JSHint