跳到主要內容
← 回到學習

學習 · 開發工具

創建自己的模板

By Kurau4 分鐘閱讀

目錄 · 9 個段落
  1. 01為什麼需要
  2. 02三種主流做法
  3. 03方法 1:GitHub Template Repository(2026 推薦)
  4. 04方法 2:degit(輕量 clone)
  5. 05方法 3:CRA Template(Legacy)
  6. 06方法 4:Vite Template
  7. 07方法 5:正式 Yeoman / Plop
  8. 08我的 Starter 內容建議
  9. 09個人經驗(2023/09 紀錄)

創建自己的專案模板

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),還超浪費時間。

三種主流做法

做法適合設定難度
GitHub Template Repository2026 推薦⭐ 最簡單
degit + repo個人 / 開源⭐⭐
CRA template / Vite template / Yeoman想做正式 npm package⭐⭐⭐⭐

方法 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
bash

方法 2:degit(輕量 clone)

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

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
bash

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

詳細製作流程見:

上傳前清理
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
bash

方法 5:正式 Yeoman / Plop

大型團隊內部規範用:

# Yeoman(老牌)
npm install -g yo generator-mygenerator
yo mygenerator
 
# Plop(輕量,套用單一檔案 / 元件)
npm install -D plop
npx plop component
bash

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,更輕量且現代。

目錄