README 說的都是騙人的
接手一個新專案。
打開 README，寫著：
npm install
npm run dev看起來很簡單。
執行 npm install，報錯。Node 版本不對。
好，裝 nvm，切版本，再跑一次。
這次 install 過了，但 npm run dev 失敗。缺少環境變數。
README 沒寫要設什麼環境變數。
翻 .env.example，有 20 個變數。哪些必填？哪些可以空？不知道。
隨便填了幾個，再跑一次。
這次起來了，但連不上資料庫。
問同事：「這個專案怎麼跑？」
同事說：「我的可以跑啊，你是不是少裝什麼？」
花了半天，終於跑起來。
這個場景，你經歷過幾次？
為什麼用 Claude Code CLI
市面上 AI 工具很多，為什麼我選 Claude Code CLI 來處理開發環境？
1. 可以讀整個專案
它不是只能看你貼給它的片段。它可以直接讀 package.json、docker-compose.yml、.env.example，理解整個專案的結構。
2. 可以直接執行指令
不用複製貼上。它可以直接在你的終端機跑 npm install、chmod 600、docker-compose up。
3. 連續對話，記住 context
不像 ChatGPT 要一直重複貼背景。它記得你剛才遇到什麼錯誤、試過什麼方法、專案結構是什麼。
4. 可以修改檔案
不只給建議，它可以直接幫你改 package.json、寫 .env、更新 README.md。
這些特性加起來，讓它特別適合處理「讓專案跑起來」這類需要來回 debug 的任務。
判斷框架：什麼時候讓 AI 接手
不是所有事都該丟給 AI。這是我的判斷框架：
✅ 完全交給 AI
環境設定 – Node 版本切換 – 依賴安裝 – 環境變數設定 – Docker 設定
依賴升級 – 升級 package 版本 – 解決 dependency 衝突 – 處理 deprecated warning
安全修正 – npm audit fix – 升級有漏洞的依賴 – 修復安全性問題
這些是規則明確、有標準答案的任務。AI 做得比人快，而且不會漏。
🤝 人機協作
升級後的程式碼修改 – API 變了，要改呼叫方式 – 語法變了，要改寫法 – 行為變了，要調整邏輯
這類任務 AI 可以做，但你要驗證結果。讓 AI 改，你來看對不對。
❌ 人來決定
要不要升級 – 升級的風險和收益 – 時程壓力 – 團隊能力
業務邏輯 – 這個功能該不該保留 – 這個行為是 bug 還是 feature – 要不要趁機重構
這些需要業務 context，AI 看不到，你得自己判斷。
實際案例：三年前的 React 專案
團隊最近接手一個專案。
三年前建的，原作者已經離職。
技術棧： – React 16（現在都 18 了） – Node 14（現在都 20 了） – Webpack 4（一堆 deprecated warning） – 環境變數散落在各處 – npm audit 顯示 47 個漏洞
README 寫著：
npm install
npm start實際執行：
npm install
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! peer dep missing: react@^15.0.0經典。
Step 1：讓 AI 診斷 + 規劃升級路徑
我打開 Claude Code，進入專案目錄：
cd legacy-react-project
claude然後說：
「這是一個三年前的 React 專案，我要讓它在本機跑起來。先讀 package.json、package-lock.json 和 README，診斷一下現況，給我一個升級計畫。」
它讀完後回報：
專案診斷：
- React 16.8.0 → 建議升級到 16.14.0（同大版本，風險低）
- Node 要求 14.x，你目前是 20.x
- 47 個安全漏洞（12 個 high，3 個 critical）
- package-lock.json 是三年前的，建議刪除重建
建議升級路徑：
1. 先用 Node 14 跑起來（確認功能正常）
2. 修復安全漏洞
3. 再考慮要不要升級 React 大版本
要我開始執行嗎？這個診斷和計畫，我自己整理至少要半小時。AI 兩分鐘就給我了。
Step 2：讓 AI 執行環境設定
我說：「好，先讓它用 Node 14 跑起來。」
AI 開始執行：
1. 切換 Node 版本...
執行: nvm install 14 && nvm use 14
✓ Now using node v14.21.3
2. 刪除舊的 lock file...
執行: rm package-lock.json node_modules -rf
✓ 已清除
3. 安裝依賴...
執行: npm install --legacy-peer-deps
✓ 安裝完成（有 warning 但可忽略）
4. 掃描環境變數需求...
找到以下需要設定的環境變數：
- REACT_APP_API_URL（必填）
- REACT_APP_ENV（建議：development）
要我建立 .env 檔案嗎？我說：「建立，API_URL 先用 http://localhost:3001」
執行: 建立 .env 檔案
✓ 已建立 .env
5. 啟動開發伺服器...
執行: npm start
✓ 專案已在 http://localhost:3000 啟動從 clone 到跑起來，10 分鐘。
Step 3：讓 AI 處理安全漏洞
跑起來後，我說：
「現在處理安全漏洞。先跑 npm audit 看看狀況，然後修復。」
執行: npm audit
發現 47 個漏洞：
- 3 critical（需要立即處理）
- 12 high
- 32 moderate
Critical 漏洞：
1. nth-check <2.0.1 - 正則表達式 DoS
2. postcss <8.4.31 - 解析器漏洞
3. webpack-dev-server <4.0.0 - 路徑遍歷
嘗試自動修復...
執行: npm audit fix
修復後剩餘 8 個漏洞（需要手動處理）
剩餘的漏洞需要升級大版本，可能會 break 現有程式碼：
- react-scripts 3.x → 5.x
- webpack 4.x → 5.x
要我升級並修復相關程式碼嗎？我說：「升級 react-scripts，幫我修復因為升級而壞掉的程式碼。」
執行: npm install react-scripts@5 --legacy-peer-deps
升級完成，檢查是否有需要修改的程式碼...
發現 3 處需要修改：
1. src/setupProxy.js
- 舊寫法：module.exports = function(app) { ... }
- 新寫法：需要改成 ES module 格式
修改中...
✓ 已修復
2. src/index.js
- ReactDOM.render 在 React 18 已 deprecated
- 但我們還在 React 16，這個可以保留
略過（不影響）
3. webpack 設定
- react-scripts 5.x 內建處理，不需要額外設定
略過
執行: npm start
✓ 專案正常啟動
執行: npm audit
✓ 0 個漏洞從 47 個漏洞到 0 個漏洞，AI 自己處理，包含程式碼修改。
Step 4：跑起來之後——功能壞了怎麼辦
很多人以為「跑起來」就結束了。
不是的。跑起來只是開始。
專案啟動後，我點了幾個頁面，發現登入頁面白屏。
我說：
「登入頁面白屏，幫我看一下 Console 有什麼錯誤。」
讀取瀏覽器 Console...
錯誤訊息：
TypeError: Cannot read property 'map' of undefined
at UserList.js:23
分析中...
問題：API 回傳格式變了。
- 舊格式：直接回傳陣列 [user1, user2, ...]
- 新格式：包在物件裡 { data: [user1, user2, ...] }
程式碼預期陣列，但收到物件，所以 .map() 失敗。
要我修復嗎？我說：「修，順便檢查有沒有其他地方也有這個問題。」
修改 src/components/UserList.js...
- 舊：users.map(user => ...)
- 新：users.data.map(user => ...)
✓ 已修復
掃描其他檔案...
發現 3 處相同 pattern：
- src/components/OrderList.js:45
- src/components/ProductGrid.js:78
- src/pages/Dashboard.js:123
修改中...
✓ 全部修復
執行: npm start
✓ 登入頁面正常顯示一個問題，連帶發現 4 個。AI 一次處理完。
Step 5：測試全部 fail 怎麼辦
登入頁修好後，我想確認有沒有其他問題。
「跑一下測試看看。」
執行: npm test
結果：47 個測試，39 個失敗 ❌
分析失敗原因...
分類：
- 28 個：snapshot 過期（UI 有改動，需要更新 snapshot）
- 8 個：mock 的 API 格式不對（跟剛才的問題一樣）
- 3 個：看起來是真的 bug
建議處理順序：
1. 先更新 snapshot（自動，風險低）
2. 修復 mock 的 API 格式（我來改）
3. 最後 3 個需要你確認是不是預期行為
要我開始處理嗎？我說：「前兩個你處理，第三個列出來給我看。」
1. 更新 snapshot...
執行: npm test -- -u
✓ 28 個 snapshot 已更新
2. 修復 mock API 格式...
修改 src/__mocks__/api.js
- 舊：return [mockUser1, mockUser2]
- 新：return { data: [mockUser1, mockUser2] }
✓ 8 個測試通過
3. 剩餘 3 個失敗的測試：
a) test/auth.test.js:45 - "應該在 token 過期時自動登出"
預期：導向登入頁
實際：停在當前頁面
→ 可能是 token 過期處理的邏輯有問題
b) test/cart.test.js:89 - "應該在庫存為 0 時禁用購買按鈕"
預期：按鈕 disabled
實際：按鈕可點擊
→ 可能是庫存檢查的時機不對
c) test/checkout.test.js:156 - "應該在折扣碼無效時顯示錯誤"
預期：顯示 "折扣碼無效"
實際：顯示 "網路錯誤"
→ 可能是錯誤處理的邏輯有問題
這 3 個要我修，還是你要先看看？我說：「這 3 個先放著，我等下確認一下是不是原本就有的 bug。先繼續。」
從 39 個失敗到 3 個，AI 處理了 36 個。剩下的是需要業務判斷的。
Step 6：讓 AI 補文件
最後，我說：
「根據剛才的過程，更新 README，讓下一個人可以在 10 分鐘內跑起來。」
它產出的 README：
## 環境需求
- Node.js 14.x（建議使用 nvm 管理）
- npm 6.x
## 快速開始
# 切換 Node 版本
nvm use 14
# 安裝依賴
npm install --legacy-peer-deps
# 設定環境變數
cp .env.example .env
# 編輯 .env，填入必要的值
# 啟動開發伺服器
npm start
## 環境變數說明
| 變數名稱 | 必填 | 說明 | 範例 |
|---------|------|------|------|
| REACT_APP_API_URL | 是 | 後端 API 位址 | http://localhost:3001 |
| REACT_APP_ENV | 否 | 環境標識 | development |
## 已知問題
1. 如果 npm install 報 peer dependency 錯誤，加上 --legacy-peer-deps
2. 必須使用 Node 14，Node 16+ 會有相容性問題
## 更新紀錄
- 2025-12-08：修復安全漏洞，升級 react-scripts 到 5.x完整、清楚、下一個人可以直接用。
從救火到還債：這不只是讓專案跑起來
到這裡，你可能以為故事結束了。
專案跑起來了，測試修好了，文件更新了。收工。
但我沒有停在這裡。
我說：
「現在專案穩定了。幫我評估一下，如果要把 React 從 16 升級到 18，工作量大概多少？有什麼風險？」
掃描專案中...
評估報告：
升級範圍：
- React 16.14.0 → 18.2.0
- ReactDOM 16.14.0 → 18.2.0
- 相關依賴 12 個需要更新
需要修改的程式碼：
- src/index.js：ReactDOM.render → createRoot（必改）
- 17 個元件使用 componentWillMount（已 deprecated）
- 3 個地方使用 findDOMNode（React 18 不支援）
- 測試檔案需要更新 render 方式
預估工作量：
- 自動升級 + 修改：約 30 分鐘
- 手動驗證 + 測試：約 2 小時
- 總計：半天
風險評估：
- 低風險：大部分是語法更新，行為不變
- 中風險：findDOMNode 那 3 個地方需要重寫邏輯
- 高風險：無
建議：可以升級。要我開始嗎？我說：「開始。」
30 分鐘後：
升級完成 ✓
變更摘要：
- React 16 → 18
- 更新 index.js 為 createRoot API
- 重寫 17 個 componentWillMount → useEffect
- 重構 3 個 findDOMNode 使用 useRef
- 更新所有測試的 render 方式
- 修復因升級產生的 2 個 lint 錯誤
執行: npm test
✓ 47 個測試全部通過
執行: npm run build
✓ Production build 成功
要我更新 README 的版本資訊嗎？這才是 AI 的真正價值
回頭看這整個過程：
原本的目標：讓專案跑起來 實際完成的事： 1. 環境設定 ✓ 2. 依賴修復 ✓ 3. 安全漏洞清零 ✓ 4. 功能修復 ✓ 5. 測試修復 ✓ 6. React 升級（16 → 18）✓ 7. 文件更新 ✓
這些事情，如果用傳統方式做，可能需要一週。
用 AI，半天。
而且不是「勉強能跑」，是比原本更好。
這就是從「救火」到「還債」的差別。
AI 完全接手的更多範例
上面的案例已經展示了 AI 可以做很多事。這裡再補充幾個常見場景：
場景 1：Docker 環境設定
你：「這個專案有 docker-compose.yml，幫我把整個環境跑起來。」
AI：
1. 讀取 docker-compose.yml...
2. 發現需要 .env 檔案，建立中...
3. 執行 docker-compose up -d
4. 等待服務啟動...
5. 檢查服務狀態...
- postgres: running
- redis: running
- app: running
6. ✓ 所有服務已啟動，app 在 http://localhost:8080場景 2：Python 專案環境
你：「這是一個 Python 專案，幫我設定 virtualenv 並安裝依賴。」
AI：
1. 檢查 Python 版本需求... 需要 3.9+
2. 建立 virtualenv...
執行: python3 -m venv venv
3. 啟動 virtualenv...
執行: source venv/bin/activate
4. 安裝依賴...
執行: pip install -r requirements.txt
5. 發現缺少系統依賴 libpq-dev...
執行: brew install postgresql（macOS）
6. 重新安裝...
✓ 依賴安裝完成場景 3：修復 CI/CD 失敗
你：「GitHub Actions 失敗了，幫我看一下 log 然後修復。」
AI：
1. 讀取 .github/workflows/ci.yml...
2. 讀取失敗的 log...
錯誤：Node 版本不符，CI 用 18，專案需要 14
3. 修改 workflow 檔案...
將 node-version: 18 改為 node-version: 14
4. ✓ 已修復，要我 commit 並 push 嗎？什麼時候不該讓 AI 接手
講完 AI 能做的，也要講它做不好的。
1. 需要權限的東西
- 公司 VPN
- 內部 npm registry
- 需要申請的 API key、資料庫帳號
AI 不知道你公司的流程，這些你得自己處理。
2. 文件完全沒有
如果專案連 README 都沒有，package.json 也是亂寫的，AI 也只能猜。
這時候還是要問人。
3. 要不要升級的決策
AI 可以幫你升級，但「該不該升級」是你的決定。
- 這個專案還會維護多久？
- 升級的 ROI 值得嗎？
- 團隊有時間處理升級後的問題嗎？
這些是業務決策，不是技術問題。
4. 業務邏輯的判斷
跑起來後，你發現一個奇怪的行為。這是 bug 還是 feature？
AI 不知道，因為它沒看過 PRD，沒聽過 PM 的說明，不知道三年前的需求背景。
這類問題，還是要問人。
延伸：本機環境也可以這樣搞
如果你連本機開發環境都還沒設好，AI 也能幫忙。
我換新電腦時，會說：
「我是一個全端工程師，主要用 Node.js 和 Python。幫我列出 macOS 上需要裝的工具，然後一個一個幫我裝。」
它會： 1. 裝 Homebrew 2. 裝 nvm、pyenv 3. 設定 Git（name、email、SSH key） 4. 裝 VS Code 並設定推薦 extension 5. 設定 shell（zsh、oh-my-zsh）
整個過程你只需要確認和輸入密碼。
延伸：部署環境也一樣
專案在本機跑起來後，部署環境也可以用同樣方法。
你：「這個專案要部署到 AWS，幫我寫 GitHub Actions 的 CI/CD pipeline。」
你：「幫我優化這個 Dockerfile，現在 build 要 5 分鐘太久了。」
你：「幫我設定 nginx reverse proxy，把 /api 導到後端服務。」這類標準化的 DevOps 任務，AI 特別擅長。
省下的不只是時間
用 AI 建置開發環境，表面上是省時間。
但真正的價值是：
1. 一致性
AI 會照著標準流程走，不會因為「我的電腦比較特別」而產生差異。
2. 文件化
每次設定完都請 AI 更新文件，知識就不會只在某個人的腦袋裡。
3. 降低門檻
新人 onboard 從「問同事 + 踩坑半天」變成「跟 AI 對話 10 分鐘」。
4. 安全性
AI 會主動處理安全漏洞，不會因為「先跑起來再說」而忽略。
這才是 AI 的真正價值——不是取代你，而是把你從重複性的苦工中解放出來。
下次你 clone 一個專案
試試這個流程：
- 打開 Claude Code：
claude - 說：「讀這個專案，告訴我怎麼跑起來」
- 遇到錯誤，直接貼給它
- 讓它處理安全漏洞
- 最後請它更新 README
10 分鐘，搞定。
然後你就有時間做真正重要的事——寫 code，而不是 debug 環境。