前面討論到前端、後端、以及外部人事資料串接的實作後，終於要部署到測試環境，並且可以讓整個 source code 發 PR 到 develop 分支了。Day5 提到，開發完功能後，成員可以透過發 Pull Request (PR) 的方式將程式交付到 Azure DevOps Service 上，觸發 Pipeline 協助我們完成以下作業。這不僅讓交付更輕鬆，也可以預防有編譯錯誤的程式碼併入主要開發分支。此外，我們還可以讓 Pipeline 完成以下事項：

prebuild 檢查 : 避免編譯失敗的程式被合併到標的 Branch 中

開發者發完 PR 當下會自動觸發 Pipeline build，針對本次發佈的各專案原始碼進行編譯作業。每個專案（含前端）必須編譯成功，才允許併入目標 Branch。值得注意的是，過去後端或 framework 不一定需要此檢核作業，因為開發時的偵錯模式自帶編譯功能，因此發生 PR 編譯錯誤的機會相對較低。但以下為實際遇到的情境：

1. 假設前端程式碼中使用了未宣告的變數：

const handleRowClick = ( assetKind: string | undefined, item: ToDoList) => {
    // 點擊行處理邏輯
    console.log('Clicked assetKind:', assetKin);//assetKin 為未宣告變數

2. 開發者透過 npm run dev 成功啟動前端專案
   
   圖15-1：前端即便有錯誤仍可啟動站台服務

3. 連結首頁且也可完成登入驗證後導轉至首頁或其他頁面
   
   圖15-2：登入與導頁也正常

4.開啟 F12 偵錯工具檢視 console，才會發現錯誤，並顯示錯誤的程式碼與行數

圖13-3：console 中其實是有噴錯的

5.需透過使用npm run build 確認檢查
除了開發習慣不同，容易讓開發者在發 PR 前忘記確認編譯是否正確外，不管前端或後端，在開發機上預先處理 Merge 可能遇到的衝突後，也容易忘記確認編譯作業，結果就直接將 PR Merge 上去了

PR 前的 prebuild

//將 prebuild Pipeline ymal 加入前端站台專案編譯檢查
          - powershell: |
              Write-Host "Project file path: $(Build.SourcesDirectory)/FrontSiteProject"
              cd $(Build.SourcesDirectory)/FrontStarter
              npm install
              npm run build-stage
            displayName: 'Build Vue3 project'

• 下方刻意將上方有錯誤的 Error 的程式碼進行 PR
  
  圖15-5：將有問題的程式發PR，驗證 pipeline 是否可檢查

• 發PR後成功觸發執行 pipeline
  
  圖15-6：pipeline 於 PR 後成功被觸發執行

*執行後，pipeline 出現錯誤，並且明確指出錯誤的行數

圖15-7：pipeline prebuild 結果

• 回至 PR 查看，確認程式碼的 PR 請求，因為 prebuild 失敗沒有被放行
  
  圖15-8：PR請求未被核可

Ending Remark

透過在 Pipeline 中加入 prebuild 完成以下目的。

• ⚙️自動化流程：減少手動測試、編譯的步驟，開發者只需發 PR 即可自動觸發檢查。
• 🩺 及早發現問題（Shift-left）：在合併前就發現程式錯誤或依賴問題，避免錯誤累積到測試或正式環境。
• ✅保持主分支穩定：只有編譯成功、符合規範的程式碼才能合併，確保 develop 或main始終可用。
• 🗂️支援多專案管理：同時檢查前端、後端或共用模組的編譯狀態，避免不同專案間依賴問題。