创建自定义的cra-template

创建自定义的cra-template

1 create-react-app新建项目

npx create-react-app cra-template-myown --template cra-template-redux

在src中定义自己的初始化项目文件，一些风格化的设置如prettirc，eslintignore等定义完记得修改package.json中的命令, 发包前拷贝到template文件夹下。

2 创建gitignore文件

添加gitignore文件到template文件夹

3 添加template.json

{
    "package": {
      "dependencies": {
        "@reduxjs/toolkit": "^1.5.1",
        "@testing-library/jest-dom": "^4.2.4",
        "@testing-library/react": "^9.3.2",
        "@testing-library/user-event": "^7.1.2",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-redux": "^7.2.3",
        "react-scripts": "4.0.3"
      },    
      "scripts": {

      }
    }
  }

4 修改项目package.json文件

{
  "name": "cra-template-myown",
  "version": "0.1.0",
  "private": false,
  "main": "template.json",
  "files": [
    "template",
    "template.json"
  ],
  "scripts": {
    ...
    "clean-files": "rm -rf ./template",
    "copy-files": "mkdir template && cp -a ./src/. template/src && cp -a ./public/. template/public  && cp gitignore README.md template/",
    "prepublishOnly": "yarn clean-files && yarn copy-files"
  },
  ...
}

5 发包

npm config ls
npm config set registry https://registry.npmjs.org/
npm login
npm publish
作为public包发布,没有权限注意是否使用了管理员权限。

cra-template-easystart介绍

github地址
npm仓库地址

1. react相关库。react-redux react-router connected-react-router redux-saga redux-thunk
2. 国际化语言。react-intl react-intl-universal
3. socket相关。socket.io-client
4. 基础组件库。antd
5. api请求。axios
6. proxy代理配置。http-proxy-middleware
7. 修改默认配置方案。craco,craco-less
8. 加解密。crypto-js
9. 唯一id。uuid
10. 单元测试组件测试。jest，react-test-renderer
11. 端到端测试。cypress
12. 模拟数据。 mock,faker,axios-mock-adapter
13. build包分析。 source-map-explorer
14. git hooks。husky,lint-staged
15. 代码风格配置。eslint，prettier