階段 3 工程化建置

會寫只是及格,前端部署工程師要讓專案「長大也不會爛」:這一階段練的是打包、規範與測試這套工程化基本功。

這一階段學什麼

• 建置工具(Vite/Webpack):搞懂開發伺服器、打包與轉譯在做什麼,產出瀏覽器能吃的最佳化檔案。
• 程式碼品質(ESLint/Prettier):Lint 抓潛在錯誤、Prettier 統一排版,搭配 Git hook 讓不合格的程式碼進不了版本庫。
• 自動化測試:替核心邏輯寫單元測試、替關鍵流程寫元件測試,改東西不再提心吊膽。
• 環境變數:把 API 網址、金鑰這類設定抽出程式碼,開發、測試、正式環境各用各的值。

為什麼是現在學

階段 2 你已經有會動的 SPA;但沒有工程化,專案一變大就失控。階段 5 的 CI/CD 流水線,跑的正是這裡建好的 Lint、測試與打包指令 — 這一階段沒鋪好,自動化就無從自動起。

怎麼練(具體行動)

1. 用 Vite 從零建一個專案,讀懂設定檔每一行在做什麼。
2. 替階段 2 的作品補上 ESLint 與 Prettier,並修完所有警告。
3. 挑三個核心函式寫單元測試,再寫一個元件互動測試。
4. 把 API 網址改成環境變數,做出開發與正式兩套設定。

完成標準

• 建好一個可打包、有 Lint 與測試的專案腳手架,指令一鍵可跑。
• 同一份程式碼,換環境變數就能指向不同後端,不必改程式。

⚠️ 常見誤區:覺得寫測試浪費時間 — 等重構壞掉沒人發現,才知道那是保險。