创建自定义Create React App Template

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