Create React App（簡稱CRA）是一個官方支持的創(chuàng)建 React 單頁應(yīng)用程序的方法。它提供了一個快速開始搭建項目腳手架的方法。但是官方只提供了 cra-template 和 cra-template-typescript 這兩個基本的模版。它不包含 React Router, React Redux, linter, prettier等我們開發(fā)中經(jīng)常用到的依賴以及配置，然后我們在開始一個項目的時候不得不一個個地安裝，配置這些依賴，非常浪費(fèi)時間。但是現(xiàn)在我們可以通過自定義CRA tempate來解決這個問題了。當(dāng)然你也可以在 npm 官網(wǎng)上通過搜索“cra-template”來找到很多優(yōu)秀的CRA template來供自己使用。
創(chuàng)建自己的CRA template
- 新建項目(在這個例子中，假定我們的模版名稱為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，注意是根目錄，這是一個容易出錯的地方，放到template目錄下的話是無效的。
{
"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等
修改項目配置，準(zhǔn)備發(fā)布到npm
- 在package.json中添加 license, author, description, keywords, repository等meta信息
- 在package.json中添加 main, files項
{
"main": "template.json",
"files": [
"template",
"template.json"
]
}
- 你還可以添加一些自動化的腳本來方便以后模版的更新和升級
{
"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"
}
在本地測試你的CRA tempate
yarn create-react-app my-app --template file:../path/to/your/template/
發(fā)布到NPM
將包到npm的需要有npm賬號，你可以自己注冊一個
如果已經(jīng)有npm賬號，先登陸，然后發(fā)布即可
npm login
npm publish --access public
等你的CRA tempate發(fā)布成功后，就可以嘗試用它創(chuàng)建一個新的項目了，
npx create-react-app my-app --template spring
#or
yarn create react-app my-app --template spring
最后安利一個作者本人創(chuàng)建的CRA template: Spring
它包含了 react-app-rewired, antd, react-router-dom, redux, typescript, redux-thunk, redux-logger等依賴和配置，可以用于快速開始一個小的react項目。
附參考鏈接
Create React App
How to create custom Create React App (CRA) templates
