創建自己的專案模板

TL;DR

每次新專案都重設 ESLint / CI/CD / 結構違反 DRY。解法:做 Scaffolding Tool / Code Generator。2026 年最簡單做法:GitHub Template Repository + degit,不用發 npm 套件。

為什麼需要

如果每個新專案都 重新設定:

• ESLint / Prettier / Husky
• CI/CD pipeline
• 檔案結構
• 測試環境
• README 模板

違反軟體工程黃金準則 DRY(Don't Repeat Yourself),還超浪費時間。

三種主流做法

方法 1:GitHub Template Repository(2026 推薦)

1. 建好 starter repo(把 ESLint / CI / 結構都設好)
2. GitHub repo Settings → 勾選 ==Template repository==
3. 用的時候在 repo 頁面點 ==Use this template==
4. 創建一個新 repo,內容 100% 複製

GitHub 內建,零成本。其他人不用裝任何工具。

# 或 CLI 用
gh repo create my-new-app --template Bobo100/my-starter

方法 2:degit(輕量 clone)

npm install -g degit

# 從 GitHub 直接下載專案結構(不帶 git history)
degit Bobo100/my-starter my-new-app
cd my-new-app
git init

degit 比 git clone 好處:

• 沒有 git history,新專案乾淨
• 支援子目錄:degit user/repo/subdir
• 支援 branch / tag:degit user/repo#main

方法 3:CRA Template(Legacy)

# 用我的 CRA Template
npx create-react-app test --template cra-template-bobonext.js     # Next.js 版
npx create-react-app test --template cra-template-boboreacttypescript  # 純 React+TS

CRA 已退場(2025-02 React 官方移除推薦),新專案直接走 GitHub Template + Vite。

詳細製作流程見:

• npx create-react-app test --template cra-template-bobonext.js
• Bobo100/cra-template-boboReactTypeScript
• dev.to — Create your own Create React App template

上傳前清理

build 出的檔案要刪掉:build/ / dist/ / node_modules/。 用 .gitignore 排除,別不小心 ship 出去。

方法 4:Vite Template

Vite 不像 CRA 有 npm template 機制,但有更彈性的方式:

# 內建選擇 framework
npm create vite@latest my-app

# 或從 GitHub repo
npm create vite@latest my-app -- --template github:user/my-vite-starter

方法 5:正式 Yeoman / Plop

大型團隊內部規範用:

# Yeoman(老牌)
npm install -g yo generator-mygenerator
yo mygenerator

# Plop(輕量,套用單一檔案 / 元件)
npm install -D plop
npx plop component

Plop 適合「每次新元件 都產生一個 folder + tests + stories」 這類需求,不是整個 starter。

我的 Starter 內容建議

my-starter/
├── .github/
│   └── workflows/
│       ├── ci.yml              # lint + test + build
│       └── deploy.yml          # 部署
├── .vscode/
│   └── settings.json           # 統一 editor 設定
├── src/
├── public/
├── tests/
├── .editorconfig
├── .eslintrc.json / eslint.config.js
├── .prettierrc
├── .gitignore
├── .nvmrc                      # 鎖 Node 版本
├── README.md                   # 模板使用說明
├── package.json
└── tsconfig.json

重點:把 所有 boilerplate 都包進來,新專案 clone 後立刻可以寫業務邏輯。

個人經驗(2023/09 紀錄)

Bobo 的 CRA Template

Bobo100/cra-template-boboReactTypeScript 已經寫了一份教學,但 須要修改(目前尚未修改)。 上傳前要 刪 build 檔案,或加 .npmignore。

2026 年 update:CRA 已退場,建議遷移成 Vite + GitHub Template,更輕量且現代。