因為自己在做一些小小練習的時候,每次都要重新建立一次React環境。雖然有官方的好用指令
npx create-react-app my-app --template typescript
但是,裡面有很多我不想要的內容,都還要一直刪刪減減。 於是乎就上網找資料如何建立自己的模板。
最終給我測試出來了。
如果有更好的方法請一定要告知我,目前Webpack我還在研究中。
使用我的最基本最基本套餐
npx create-react-app test --template cra-template-boboreacttypescript
可以直接下載我的檔案去做更改,後面會教你怎麼做
資料夾結構
cra-template-boboReactTypeScript
│ package.json
│ README.md
│ template.json
│
└─template
│ gitignore
│ package.json
│ README.md
│
├─public
│ 404.html
│ index.html
│
└─src
│ App.css
│ App.tsx
│ index.css
│ index.tsx
│
└─pages
Error.tsx
Home.tsx
-
建立一個空的資料夾名稱為cra-template-{your-template-name},並且cd進去這個資料夾
-
輸入
npm init
-
安裝你需要的package
-
建立一個template.json,放入package與script資訊
template.json範例
{ "package": { "dependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.5.2", "@types/node": "^16.18.12", "@types/react": "^18.0.27", "@types/react-dom": "^18.0.10", "gh-pages": "^5.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.8.1", "react-scripts": "5.0.1", "typescript": "^4.9.5", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] } } }
-
再建立一個template資料夾
-
把外面的package.json,與.gitignore複製過來
-
若有之後需要的內容都放在這邊,例如我需要public資料夾與旗下的index.html與404.html
-
回到外層的package.json刪除這一行
"private": true,
並修改npm name(這會是你的npm包名稱) "name": "{your-template-name}", 這無法跟別人重複,若都無法取可以考慮使用scope name 也就是 "name": "{@yourname/your-template-name}",若使用scope name之後發布要多加一個指令
{ "name": "cra-template-boboreacttypescript", "version": "0.1.3", "files": [ "template", "template.json" ], "dependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.5.2", "@types/node": "^16.18.12", "@types/react": "^18.0.27", "@types/react-dom": "^18.0.10", "gh-pages": "^5.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.8.1", "react-scripts": "5.0.1", "typescript": "^4.9.5", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }
-
登入npm,沒有帳號的請註冊 註冊連結
npm login
-
發佈到npm上
npm publish
若有使用scope name,則使用下面的指令來發佈
npm publish -- access public
-
使用自己的模組
-
使用指令
npx create-react-app {要創立的資料夾名稱} --template {你的npm包名稱}