npx create-react-app test --template cra-template-bobonext.js
自製 CRA Template
TL;DR把專案的「常用設定 + 套件 + 樣板程式碼」打包成 cra-template-xxx npm 套件,以後 npx create-react-app my-app --template xxx 就能一鍵套用。2026 年 CRA 已被官方移除推薦,新專案改用 Vite / Next.js + 自製 starter repo。
我的兩個 Template
Next.js 版
npx create-react-app test --template cra-template-bobonext.js
純 React + TS 版
npx create-react-app test --template cra-template-boboreacttypescript
SourceBobo100/cra-template-boboReactTypeScript
CRA Template 結構
cra-template-{name}/
├── package.json # 套件 metadata
├── README.md
├── template.json # CRA 會讀這個決定如何安裝
└── template/ # 整個資料夾複製到新專案根目錄
├── public/
├── src/
├── .gitignore
├── README.md
└── ...
template.json 範例:
{
"package": {
"dependencies": {
"axios": "^1.5.0",
"react-router-dom": "^6.16.0",
"@reduxjs/toolkit": "^1.9.7"
},
"devDependencies": {
"tailwindcss": "^3.3.0",
"@types/node": "^20.0.0"
},
"scripts": {
"lint": "eslint src",
"format": "prettier --write src"
}
}
}
template.json 的 package 會 merge 進新專案的 package.json,不要直接放在 template/package.json(會被覆寫)。
發布到 npm
# 套件名必須以 cra-template- 開頭
npm init # 建 package.json,name: cra-template-xxx
npm publish # 發布
之後就能用 npx create-react-app my-app --template xxx(去掉 cra-template- 前綴)。
踩過的坑
坑 1:.gitignore 不能直接放
CRA 在處理 template 時 會跳過 .gitignore,要改名 gitignore(沒點),CRA 安裝時自動加回 dot:
template/
├── gitignore # ✅ 不是 .gitignore
└── ...
如果你放 .gitignore,會出現這個錯:
node:internal/fs/utils:348
throw err;
^
Error: ENOENT: no such file or directory, lstat 'D:\Github Project\test\gitignore'
at Object.lstatSync (node:fs:1574:3)
...
報錯訊息看起來找不到 gitignore(沒點)但其實是 CRA 想把 .gitignore rename 回 gitignore 的過程出錯。把 template/.gitignore 改名成 template/gitignore 就解了。
坑 2:檔名大小寫(macOS / Linux 上踩)
Mac / Linux 區分大小寫,Windows 不分。如果你在 Windows 開發 template,檔名大小寫不一致,在 Linux CI 跑會炸。寫 import 時統一用小寫 + kebab-case 最安全。
坑 3:npm cache clean --force
如果 重複安裝失敗,通常是 npm cache 卡到舊版本,清掉再試:
npm cache clean --force
2026 年的替代方案
CRA 已退場
2025-02 React 官方文件移除 CRA 推薦,改推:
| 用途 | 工具 |
|---|---|
| SPA / 簡單應用 | Vite |
| 全端 / SSR | Next.js / Remix(已合併到 React Router v7) |
| Mono-repo | TanStack Start |
自製 Vite template
Vite 沒有 CRA 那套 --template 機制,但有更彈性的:
# 用任意 GitHub repo 當 template
npx degit Bobo100/my-vite-starter my-app
# 或用 GitHub Template Repository(GitHub 上設定 Template repo)
gh repo create my-app --template Bobo100/my-vite-starter
推薦 degit(輕量、不帶 git history),或直接走 GitHub 的 Template Repository 機制。
create-* 工具集合
近年流行 framework 自帶 create-* 工具:
npm create vite@latest # Vite
npm create next-app@latest # Next.js
npm create remix@latest # Remix
npm create t3-app@latest # T3 Stack
npx create-tsr-app # TanStack Start
自己的 starter 用 degit + GitHub template 即可,不用維護 npm package。