create-frontend-template 是一套互動式前端專案腳手架。它會從內建模板建立新專案、套用團隊需要的設定，並可選擇初始化 Git 與安裝依賴，讓開發者完成建立後就能開始開發。
這個工具不是要取代 Vite 或其他官方腳手架，而是把團隊已經確認會重複使用的專案結構與設定，包成一個可維護的起點。
原始碼可在 GitHub repository 查看。
為什麼開發這個工具
建立新的前端專案時，除了框架預設內容，通常還需要加入固定的套件、目錄結構、環境變數、程式碼規範、建置設定與部署設定。
過去的做法是找到舊專案，手動複製、清除既有內容，再逐一修改設定。這個流程容易漏掉檔案、保留舊專案名稱，也會讓不同專案的設定逐漸不一致。
因此我把共同設定集中到模板中，並透過 CLI 處理建立流程。之後要更新團隊的開發環境時，只需維護模板並發布新版工具，不必再仰賴每位開發者自行複製與調整。
解決的問題
- 減少重複工作，不再從既有專案手動複製基礎設定與程式碼。
- 降低人為錯誤，自動處理 dotfile、專案名稱、Git 初始化與依賴安裝。
- 統一開發環境，讓新專案使用一致的套件、目錄結構與工具設定。
- 集中維護模板，團隊規範更新時只需要修改模板並發布新版工具。
功能特色
- 互動式輸入專案名稱與選擇模板。
- 支援命令列參數，可整合到腳本或自動化流程。
- 自動將模板的
package.json名稱更新為新專案名稱。 - 可選擇執行
git init與安裝依賴。 - 自動偵測 npm、pnpm、Yarn 或 Bun。
- 自動還原 npm 發布時可能被忽略或改寫的 dotfile。
- 新增模板時不必修改 CLI 主流程。
目前內建的 React 模板採用 React 19、React Router 8、Vite 8、Tailwind CSS 4 與 Zustand。
使用前後
原本建立專案的流程：
尋找舊專案 → 複製檔案 → 清除舊內容 → 修改專案名稱
→ 檢查環境設定 → 安裝依賴 → 初始化 Git → 開始開發使用工具後，流程收斂為：
執行建立指令 → 選擇模板與選項 → 開始開發系統需求
- Node.js
20.19+或22.12+。 - npm、pnpm、Yarn 或 Bun 其中一種套件管理器。
- Git，只有在需要自動初始化 repository 時才需要。
React 模板使用 Vite 8，因此 Node.js 版本需符合 Vite 的目前需求。若模板日後升級或替換建置工具，這個版本條件也應一併更新。
快速開始
套件發布至 npm registry 後，可透過 npm 建立專案：
npm create frontend-template my-app依照畫面選擇是否初始化 Git、安裝依賴，完成後啟動開發環境：
cd my-app
npm run dev也可以直接執行完整套件名稱：
npx create-frontend-template my-app若使用私有 registry，請先依服務商說明完成 registry 設定與登入。
指令選項
create-frontend-template [project-name] [options]
Options:
-t, --template <name> 指定模板短名或完整資料夾名
-i, --install 建立後直接安裝依賴，不顯示確認提示
--no-install 不安裝依賴
--git 初始化 Git repository
--no-git 不初始化 Git repository透過 npm create 傳遞選項時，需要在選項前加上 --：
# 使用 React 模板並直接安裝依賴
npm create frontend-template my-app -- --template React --install
# 只產生檔案，不初始化 Git，也不安裝依賴
npm create frontend-template my-app -- --template React --no-git --no-install模板名稱可使用短名或資料夾名，例如 React 與 template-React。目前名稱比對會保留大小寫，因此 react 無法對應 template-React；建議使用 CLI 顯示的名稱。
建立流程
CLI 依序執行以下工作：
- 讀取專案名稱並選擇模板。
- 目標資料夾非空時，詢問是否覆蓋模板中的同名檔案。
- 詢問是否初始化 Git 與安裝依賴，命令列選項優先於互動選擇。
- 複製模板，並將新專案的
package.json名稱改為目標資料夾名稱。 - 依選擇執行
git init及目前套件管理器的安裝指令。
套件管理器會依啟動 CLI 時的環境判斷；無法判斷時使用 npm。
覆蓋只會複製或改寫模板中的同名檔案，不會清空目標資料夾內其他既有檔案。為了避免新舊檔案混在一起，建議使用不存在或空白的目標資料夾。
常見問題
找不到指定模板
確認模板資料夾位於套件根目錄、名稱以 template 開頭，並注意模板名稱大小寫。
依賴安裝失敗
CLI 仍會保留已建立的專案。進入專案資料夾後，檢查 registry、網路、Node.js 版本與相依性錯誤，再手動執行套件管理器的安裝指令。
Git 沒有初始化
確認系統可直接執行 git，且沒有使用 --no-git。若建立時略過，也可進入專案後手動執行 git init。
IIS 重新整理頁面後出現 404
確認部署內容包含 web.config、IIS 已安裝 URL Rewrite 模組，並檢查 base、basename 和實際部署子路徑是否一致。
後續可以補強的方向
目前工具已經能減少建立專案時的重複工作。接下來我會優先考慮以下幾點：
- 將
--force改為明確選項，避免預設略過相依性問題。 - 在建立前檢查 Node.js 與 Git 版本，提早回報可理解的錯誤訊息。
- 為每個模板加入建立、安裝、型別檢查與建置的自動化測試。
- 提供模板版本與變更紀錄，讓既有專案能清楚判斷是否需要跟進新的團隊設定。
參考資料
本專案採用 MIT License。