Create React App（简称CRA）是一个官方支持的创建 React 单页应用程序的方法。它提供了一个快速开始搭建项目脚手架的方法。但是官方只提供了 cra-template 和 cra-template-typescript 这两个基本的模版。它不包含 React Router, React Redux, linter, prettier等我们开发中经常用到的依赖以及配置，然后我们在开始一个项目的时候不得不一个个地安装，配置这些依赖，非常浪费时间。但是现在我们可以通过自定义CRA tempate来解决这个问题了。当然你也可以在 npm 官网上通过搜索“cra-template”来找到很多优秀的CRA template来供自己使用。
创建自己的CRA template
- 新建项目(在这个例子中，假定我们的模版名称为spring)
yarn create react-app cra-template-spring
- 添加你需要的任何依赖以及配置
- 创建模版
3.1 创建 template/ 目录
mkdir template/
3.2 将根目录的.gitignore文件复制到 template/目录, 注意放到template目录下的gitignore文件不要以“.”开头
cp .gitignore template/gitignore
3.3 在根目录创建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 目录 复制到 template目录下
cp -a ./src/. template/src && cp -a ./public/. template/public
3.5 将其他根目录下的各种配置文件复制到 template目录，如 tsconfig.json, paths.json等
修改项目配置，准备发布到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/
发布到NPM
将包到npm的需要有npm账号，你可以自己注册一个
如果已经有npm账号，先登陆，然后发布即可
npm login
npm publish --access public
等你的CRA tempate发布成功后，就可以尝试用它创建一个新的项目了，
npx create-react-app my-app --template spring
#or
yarn create react-app my-app --template spring
最后安利一个作者本人创建的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
