在第一篇日誌裡,我寫了一個晚上把 6 個網站一起整修的經過。之所以做得到,是因為這些網站放在同一個儲存庫(monorepo),共用同一個套件。這篇就是把那個結構畫成地圖的紀錄。在上方的圖裡點一下網站節點,就會展開那個網站用到的分組;打開「以清單檢視」,也能用文字讀到同樣的內容。
它由什麼組成
儲存庫裡有一個共用套件 @site30cut/ads,和 6 個網站。我自己經營的有計算模阿、字數、假日模阿和 site30cut(這個網站)4 個,另外 2 個是咖啡店客戶網站和到府拋光客戶網站。6 個網站以 workspace 方式依賴的套件只有這一個,也沒有哪個網站會去引用另一個網站的程式碼。
這個套件對外提供 33 個 export,我依性質分成 6 組。
- 選單 7 個:頂部選單、抽屜選單、圖示
- 廣告 4 個:廣告版位、AdSense 中繼資料、Coupang 連結
- 搜尋與分享 4 個:OG 圖片、RSS、流量分析、分享按鈕
- PWA 與演出 2 個:安裝用 manifest 的串接、季節效果
- 表單與計算 9 個:輸入檢查、計算狀態、比較、圖表
- 共用畫面 7 個:聯絡、隱私權、404、語言切換、設定
為什麼合成一個
原因很簡單。如果選單、廣告版位、PWA 設定每個網站各做一份,每次修改都得重做 6 遍,而且總會漏掉一兩個網站。共用套件只要改一次,6 個網站就一起改變,所以我才能在一個晚上整修 6 個網站。代價是一處失誤可能擴散到 6 個網站,因此改動共用套件時,我習慣把 6 個網站全部建置一遍來確認。
結果——2026-10-19 建置為準
scripts/arch-tree.mjs 會讀取套件的 export 和各網站的 import 產生數值。圖和下面的數字來自同一份資料。
- 共用套件的 export:33 個
- 6 個網站全都使用的 export:12 個
- 網站不直接使用、只在套件內部使用的 export:7 個
- 各網站的使用數:計算模阿 22 個、字數 18 個、假日模阿 19 個、site30cut 16 個、咖啡店客戶網站 15 個、到府拋光客戶網站 16 個
- 使用表單與計算工具組的網站:計算模阿、字數、假日模阿,也就是只有 3 個工具型網站
共用套件(packages/site-ads)的 commit 數,我在 2026-10-19 用 git log --oneline -- packages/site-ads 數過,共 29 個。
接下來要做的事
有一個限制。這張圖是在建置 site30cut 時產生的,如果只有其他網站的 import 改變,site30cut 並不會重新部署。圖會在下一次 site30cut 部署時更新,所以我把「建置基準日」一起寫上。若每次其他網站有 commit 就重新部署,成本反而更高,所以我選擇不這麼做。
另一件事是共用套件的版本管理。現在所有網站永遠看到最新版,但網站變多之後,可能會有某個網站需要停在舊版。到時候要用什麼方式,等真正需要時再寫。想知道網站是怎麼做出來的,也可以看製作流程。