Create React App（簡(jiǎn)稱CRA）是一個(gè)官方支持的創(chuàng)建 React 單頁(yè)應(yīng)用程序的方法访惜。它提供了一個(gè)快速開始搭建項(xiàng)目腳手架的方法。但是官方只提供了 cra-template 和 cra-template-typescript 這兩個(gè)基本的模版海蔽。它不包含 React Router, React Redux, linter, prettier等我們開發(fā)中經(jīng)常用到的依賴以及配置，然后我們?cè)陂_始一個(gè)項(xiàng)目的時(shí)候不得不一個(gè)個(gè)地安裝抹竹，配置這些依賴鸯屿，非常浪費(fèi)時(shí)間。但是現(xiàn)在我們可以通過自定義CRA tempate來(lái)解決這個(gè)問題了凶掰。當(dāng)然你也可以在 npm 官網(wǎng)上通過搜索“cra-template”來(lái)找到很多優(yōu)秀的CRA template來(lái)供自己使用。
創(chuàng)建自己的CRA template
- 新建項(xiàng)目(在這個(gè)例子中蜈亩，假定我們的模版名稱為spring)
yarn create react-app cra-template-spring
- 添加你需要的任何依賴以及配置
- 創(chuàng)建模版
3.1 創(chuàng)建 template/ 目錄
mkdir template/
3.2 將根目錄的.gitignore文件復(fù)制到 template/目錄, 注意放到template目錄下的gitignore文件不要以“.”開頭
cp .gitignore template/gitignore
3.3 在根目錄創(chuàng)建template.json懦窘，注意是根目錄，這是一個(gè)容易出錯(cuò)的地方稚配，放到template目錄下的話是無(wú)效的畅涂。
{
"package": {
"dependencies": {
"@ant-design/icons": "^4.6.2",
"@reduxjs/toolkit": "^1.5.1",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/jest": "^26.0.22",
"@types/node": "^14.14.37",
"@types/react": "^17.0.3",
"@types/react-dom": "^17.0.3",
"antd": "^4.15.0",
"babel-plugin-import": "^1.13.3",
"less": "^3.11.1",
"less-loader": "^6.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.3",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"redux": "^4.0.5",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"typescript": "^4.2.3",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
"devDependencies": {
"@types/react-redux": "^7.1.16",
"@types/react-router-dom": "^5.1.7",
"@types/redux-logger": "^3.0.8",
"customize-cra": "^1.0.0",
"react-app-rewired": "^2.1.8"
}
}
}
3.4 將 src 和 public 目錄 復(fù)制到 template目錄下
cp -a ./src/. template/src && cp -a ./public/. template/public
3.5 將其他根目錄下的各種配置文件復(fù)制到 template目錄，如 tsconfig.json, paths.json等
修改項(xiàng)目配置道川，準(zhǔn)備發(fā)布到npm
- 在package.json中添加 license, author, description, keywords, repository等meta信息
- 在package.json中添加 main, files項(xiàng)
{
"main": "template.json",
"files": [
"template",
"template.json"
]
}
- 你還可以添加一些自動(dòng)化的腳本來(lái)方便以后模版的更新和升級(jí)
{
"clean-files": "rm -rf ./template/public ./template/src",
"copy-files": "cp -a ./src/. template/src && cp -a ./public/. template/public",
"prepublishOnly": "yarn clean-files && yarn copy-files"
}
在本地測(cè)試你的CRA tempate
yarn create-react-app my-app --template file:../path/to/your/template/
發(fā)布到NPM
將包到npm的需要有npm賬號(hào)午衰，你可以自己注冊(cè)一個(gè)
如果已經(jīng)有npm賬號(hào)立宜，先登陸，然后發(fā)布即可
npm login
npm publish --access public
等你的CRA tempate發(fā)布成功后臊岸，就可以嘗試用它創(chuàng)建一個(gè)新的項(xiàng)目了橙数，
npx create-react-app my-app --template spring
#or
yarn create react-app my-app --template spring
最后安利一個(gè)作者本人創(chuàng)建的CRA template: Spring
它包含了 react-app-rewired, antd, react-router-dom, redux, typescript, redux-thunk, redux-logger等依賴和配置，可以用于快速開始一個(gè)小的react項(xiàng)目帅戒。
附參考鏈接
Create React App
How to create custom Create React App (CRA) templates
