← 首頁

重構筆記(6)

重構筆記//8 min

AI 時代的重構姿勢:OpenSpec × Claude Code 實戰 Ep-1

本篇將拆解當下最輕量的 spec-driven development 工具 OpenSpec 的兩個入門指令 — 從 openspec init 在你 repo 內安插的目錄、到 openspec config profile 為什麼把「安裝在哪」(Delivery)跟「有哪些可用 workflow」(Workflows)切成兩個獨立維度設定。看完你就能解讀為什麼 /opsx:propose 在 Claude Code 一打就出現,而你某個同事的 Cursor 卻沒有。

#重構筆記#OpenSpec
重構筆記//19 min

AI 時代的重構姿勢:OpenSpec × Claude Code 實戰 Ep-2

動工 Laravel 前,先把 PHP 8 與 Composer 兩張入場券辦好。本篇用一個 Node.js 寫慣的人能秒懂的角度,拆解這兩個工具到底在做什麼、為什麼非裝不可、怎麼在 macOS / Linux / Windows 各自一行裝起來,並把我們即將用來 scaffold 後端的那條 `composer create-project laravel/laravel backend "^12.0"` 一個一個 token 拆給你看。

#重構筆記#OpenSpec#PHP#Laravel
重構筆記//24 min

AI 時代的重構姿勢:OpenSpec × Claude Code 實戰 Ep-3

Carbon-ESG 前端開工。本篇拆解 `pnpm create next-app` 那一行指令背後的 8 個 flag、pnpm 11 的 onlyBuiltDependencies 為什麼會卡住 sharp/unrs-resolver、Node 24 上的 .nvmrc 怎麼降版、以及把預設 starter 替換成「14 行能看到後端 API URL」的最小首頁。最後用一個 axios client 先預告 Sanctum SPA 模式的 cookie 契約,完整對接留到 Ep-4 拆。

#重構筆記#OpenSpec#Next.js#React
重構筆記//12 min

AI 時代的重構姿勢:OpenSpec × Claude Code 實戰 Ep-4

phase-1-auth-sanctum 開工。/opsx:propose 一條指令背後 4 個 artifact 各在做什麼、Sanctum SPA 模式為什麼比 token 模式適合 Carbon-ESG、`SESSION_DOMAIN` / `SANCTUM_STATEFUL_DOMAINS` / `cors.php` / `withCredentials` 四個觸點為什麼被寫進 spec 級別 requirement、以及 Next.js 16 App Router 上 `useSession()` 怎麼設計成 SSR-friendly 的雙形態 hook。本篇純設計 walkthrough,實作 transcript + Network panel debug clinic 留 Ep-5。

#重構筆記#OpenSpec#Laravel#Sanctum#Next.js
重構筆記//15 min

AI 時代的重構姿勢:OpenSpec × Claude Code 實戰 Ep-5

phase-2-carbon-listings 一天從 propose 跑到 archive。10 個 design 決策挑 4 個講透:**角色推導用 row 存在性而不是 enum**、**state machine + saving listener 雙保險**、**同時購買的競態用 DB::transaction + lockForUpdate + UNIQUE 三層防線**、**`/me` 不開新端點直接 spread role flag**。69 個 Pest 測試怎麼被 8 個 task group 推著長出來,前端 8 個 surface 怎麼用一個 `serverGet` helper 把 RSC + cookie 接住。最後 archive 儀式:delta spec sync 回 `specs/auth` + 整本 `specs/carbon-listings` 落地。

#重構筆記#OpenSpec#Laravel#Next.js#State Machine
重構筆記//20 min

AI 時代的重構姿勢:OpenSpec × Claude Code 實戰 Ep-6

phase-3-jobs 把第四個行為角色 worker 接進來:`saving` listener 之外再加一個 `saved` listener 做 cross-table 副作用、apply 中途把 `WorkerJob.rejected` 從 spec 砍掉、multipart 上傳的 FormRequest 紅線。最痛快的一段是抓到一個 phase-1 就埋下的 latent bug — server-side `fetch()` 沒帶 `Referer` 害 Sanctum stateful middleware 不認得 SPA session,整個 SSR 認證鏈靜默斷掉,直到 phase-3 因為新增的 `getApplicationStatusFromCookies` 把它逼出來。19 個 backend e2e + 13 個 frontend e2e + 133 個 Pest 一次過。

#重構筆記#OpenSpec#Laravel#Next.js#Sanctum#Multipart