Pro React Admin

项目特性

升级 Ant 5.x.x，实现亮白与暗黑主题切换，并自定义组件主题，且组合紧凑算法实现相关主题
基于 React 最新版本，拥抱 Hooks
基于 React Router V6, 实现嵌套路由更方便
基于 Webpack 最新版本，实现多环境打包部署，代码分割优化，结合官方分析工具，实时优化代码
同时支持 vite 4.x.x, 极速构建
基于 Faker 实现 Mock Server,不依赖后端实现模拟数据更加方便
封装 Fetch, 实现 useFetch, 请求更加方便，取消请求，实现请求及响应拦截，方便数据处理及统一报错提示
支持 TypeScript 5.x.x, 一切变得可控，扼杀错误于摇篮之中
支持多页签，提升效率，支持国际化
代码风格统一，项目统一配置 ESLint/Prettier/Husky/EditorConfig
配置 Commit message，使用标准 commit 生成 changelog 标准化
配置 Sentry，方便日志追踪，及时发现问题
实现 ErrorBoundary,方便定位问题，避免不可预知的问题导致系统崩溃
代码分割，组件懒加载，Loading 垂直水平居中
集成 Bit，跨项目复用组件，支持在多个仓库间隔离和复用代码，简化协作过程，可以共享、维护和同步来自不同项目的隔离组件
集成 Bookstory, 方便生成组件文档
更多特性请 fork 项目，相信我，你会有意想不到的收获

Antd 4.x.x 版本

基于 Antd 实现亮白及暗黑两套主题，请参见 feature-antd4 分支

Technology Stack

React: v18.x.x React
React Router: v6.x.x React Router
Webpack:v5.x.x Webpack
Babel: v7.x.x Babel, Versions
Antd: v5.x.x Ant Design
TypeScript: v5.x.xTypeScript
Vite: v4.x.x Vite

Development

  1. git clone https://github.com/wkylin/pro-react-admin.git
  2. cd pro-react-admin
  3. 可以选择以下两种方式的任一方式启动项目, 其他 cli 参考 package.json 中的 scripts
    - $ npm start
    - $ npm run dev:faker
    - $ npm run vite:dev:faker
  4. Bit - Build composable software
    - $ npm i -g @teambit/bvm
    - $ bvm install
    - $ bvm upgrade
    - $ bit start
  5. Storybook -- A tool for UI development
    - npx storybook init
    - npm run storybook

脚手架--白泽 baize

可以使用为此项目准备的脚手架开发--白泽 baize
```
   > npm install baize --location=global
   > baize
```

VSCode extension: 别名路径跳转

    "alias-skip.mappings": {
        "@src": "/src",
        "@stateless": "/src/components/stateless",
        "@stateful": "/src/components/stateful",
        "@hooks": "/src/components/hooks",
        "@container": "/src/components/container",
        "@assets": "/src/components/assets",
        '@pages': path.resolve('./src/pages'),
        '@routers': path.resolve('./src/routers'),
        '@utils': path.resolve('./src/utils'),
    }

WebStorm 别名跳转设置

Settings >> Languages & Frameworks >> Javascript >> Webpack: 指定 Configuration file: webpack\webpack.common.js

使用标准 commit 生成 changelog 标准化

conventional-changelog
standard-version
npm install
package.json
git commit
conventional-changelog-cli

standard-version

changes
git add . / git cz
npm run release

npm install --save-dev commitizen
npm install --save-dev cz-conventional-changelog
"config": {
  "commitizen": {
    "path": "cz-conventional-changelog"
  }
}
git add .
git cz or cz
npm install -g conventional-changelog-cli
conventional-changelog -p angular -i CHANGELOG.md -s
npm install -g standard-version
"release": "standard-version --tag-prefix \"publish/\""

约定式提交

Conventional Commits

Commit message

The commit message should be structured as follows:

  <type>[optional scope]: <description>
  <BLANK LINE>
  [optional body]
  <BLANK LINE>
  [optional footer(s)]

"type-enum": ["build", "chore", "ci", "docs", "feat", "fix", "perf", "refactor", "revert", "style", "test"]
type-enum 说明文档：
- build: 依赖调整影响构建系统或外部依赖的更改 (示例作用域：gulp, broccoli, npm）
- chore: 杂务处理其他不会修改源文件或者测试文件的更改
- ci: 脚本变更对 CI 配置文件和脚本的更改（示例作用域： Travis, Circle, BrowserStack, SauceLabs)
- docs: 文档变更添加或者更新文档
- feat: 添加功能引入新的特性
- fix 错误修复修复 bug
- perf: 性能优化更改代码以提高性能
- refactor: 代码重构即不是修复 Bug，也不是添加特性的代码更改
- revert: 恢复版本恢复到上一个版本
- style: 格式调整不会影响代码含义的更改（空格，格式缺少分号等）
- test: 更新测试添加或者更新测试
https://www.npmjs.com/package/devmoji
https://gitmoji.dev/
git commit 工具链
https://theodorusclarence.com/library/conventional-commit-readme

React Code Splitting Library

Loadable Components

Mock Server

// mock index.js
npm run dev:faker

Deployment

Deployment: [Deployment] (https://create-react-app.dev/docs/deployment)

Deploy gh-pages:

"predeploy": "npm run build:production",
 "deploy": "gh-pages -d dist",

架构

待解决

配备比较完善的脚手架：
- https://blog.kiradev.co/build-a-cli-using-nodejs
完善文档：
CacheRoute: react-router-cache-route

Docusaurus

Github:
Demo:

Snyk

  - npm install -g snyk
  - snyk auth
  - snyk monitor

Bit

已支持特性

TypeScript: TypeScript
Mock Server
- Faker
- msw
单页面多页签参考
- react-antd-multi-tabs-admin
Axios
- axios 拦截器之重复请求取消
React SVGR
- https://react-svgr.com/docs/webpack/

代码规范：ESLint Prettier Husky EditorConfig

ESLint: ESLint

ESLint is a linter for the JavaScript language, written in Node.js. That helps you find and fix problems in your JavaScript code.

https://json.schemastore.org/eslintrc
Prettier: Prettier

Prettier is an opinionated code formatter that formats the code with the help of rules we set.
Husky: Husky

Husky is an NPM package that lets you run a set of commands or script before any git action. For eg pre-push, pre-commit, pre-rebase.
Commit Lint: Commit Lint

CommitLint helps your team adhering to a commit convention. By supporting npm-installed configurations it makes sharing of commit conventions easy.
Editor Config: EditorConfig EditorConfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs.
Semantic Versioning: Semantic Versioning
Active hooks: https://typicode.github.io/husky/#/?id=install
Prettierrc http://json.schemastore.org/prettierrc

Conflict eslint prettier Conditional (ternary) operator

 // lint-staged

 "lint-staged": {
   "**/*": [
     "npm run prettier:fix"
   ],
   "src/**/*.{js, jsx, ts, tsx}": [
     "npm run eslint:fix",
     "npm run prettier:fix"
   ],
   "src/**/*.less": [
     "npm run stylelint:fix",
     "npm run prettier:fix"
   ],
   "*.md": [
     "npm run markdownlint:fix",
     "npm run prettier:fix"
   ]
 },
 // .eslintrc.json
 "extends": ["plugin:react/recommended", "standard", "prettier"],
 // package.json
 "prettier:fix": "prettier --write \"src/**/*\" --end-of-line auto --ignore-unknown",

自动化持续代码审查工具

Mac 本地部署 SonarQube

Sentry 接入

Sentry
遇到的问题：
- ERROR in Sentry CLI Plugin: spawn /Users/sheldon/Desktop/promotion-manage-web/node_modules/@sentry/cli/sentry-cli ENOENT
- 解决方案参考：https://juejin.cn/post/6961012856636571655
- "sentry:check": "node check-sentry.js
Self-Hosted Sentry nightly -https://github.com/getsentry/self-hosted

VSCode Extensions

ErrorLens: ErrorLens
SonarLint: https://www.sonarlint.org/

CSS Modules

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.

PostCSS: PostCSS
StyleLint: StyleLint npx stylelint --help

ACSS

Windi CSS: Windi CSS
TailWind CSS: TailWind CSS

CI/CD 自动化构建

GitHub Actions

Test

    1. npm install jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer --save-dev
    2. npm install  --save-dev @testing-library/react
    3. npm install cypress --save-dev
    4. npm install --save-dev @testing-library/react-hook

Plugins

HTTP

HTTP: HTTP

Code Contributors

Choose A License

Server: Dev, Test, UAT(Live), Staging, Demo, Production

Server Info

NPM version

Git Tag

git tag -a v1.2.0 -m "version: 1.2.0"
git push origin v1.2.0
git push origin --tags

Nginx

Mac Nginx

 brew install nginx
 brew reinstall nginx

 /usr/local/var/www
 /usr/local/etc/nginx/nginx.conf
 /usr/local/etc/nginx/servers/

 brew services list
 brew services start nginx
 brew services stop nginx
 brew services restart nginx

Nginx.conf

server {
 listen       8081;
 #server_name  localhost;
 server_name  www.promotion-web.com;

 location / {
     root   /usr/local/var/www/promotion-web;
     index  index.html index.htm;
     try_files  $uri $uri/ /index.html @rewrites;
     expires -1;
     add_header Cache-Control no-cache;
     # proxy_pass http://localhost:3000;
 }
 # 接口转发，如果需要的话
 #location ~ ^/api {
 #  proxy_pass http://www.wklin.com;
 #}
 location @rewrites {
   rewrite ^(.+)$ /index.html break;
 }
 # 或者全部重定向
 # return 301 https://$server_name$request_uri;
}

 # SwitchHosts!
 192.168.1.101 www.promotion-web.com

Nginx for Windows

   1. start nginx
   2. nginx -s stop
   3. nginx -s quit
   4. nginx -s reload
   5. nginx -s reopen

Tree Node Cli

npm install -g tree-node-cli
Mac: tree -L 2 -I "node_modules" -r -F
Win: treee -L 2 -I "node_modules" -r -F

tree node

 pro-react-admin/
├── workspace.jsonc
├── webpack/
│   ├── webpack.prod.js
│   ├── webpack.dev.js
│   ├── webpack.common.js
│   ├── process.js
│   ├── paths.js
│   └── dev.proxy.js
├── vite.config.js
├── typings/
│   ├── style.d.ts
│   ├── declaration.d.ts
│   └── asset.d.ts
├── tsconfig.json
├── src/
│   ├── utils/
│   ├── theme.tsx
│   ├── theme/
│   ├── styles/
│   ├── store/
│   ├── service/
│   ├── routers/
│   ├── reducers/
│   ├── pages/
│   ├── index.tsx
│   ├── components/
│   ├── assets/
│   ├── actions/
│   └── App.tsx
├── public/
│   ├── robots.txt
│   ├── manifest.json
│   ├── loading.svg
│   ├── index.html
│   └── favicon.ico
├── packagehash.txt
├── package.json
├── package-lock.json
├── index.html
├── faker/
│   ├── utils/
│   ├── shops/
│   ├── index.js
│   └── app/
├── docker-compose.yml
├── dist/
│   ├── static/
│   ├── react.bb194261542b956cd3ea.js.map
│   ├── react.bb194261542b956cd3ea.js.gz
│   ├── react.bb194261542b956cd3ea.js.LICENSE.txt
│   ├── react.bb194261542b956cd3ea.js
│   ├── index.html
│   └── favicon.ico
├── compilation-stats.json
├── check-sentry.js
├── babel.config.js
├── api/
│   ├── server.js
│   ├── package.json
│   ├── package-lock.json
├── SECURITY.md
├── README.md
├── LICENSE
├── Dockerfile
├── CODE_OF_CONDUCT.md
└── CHANGELOG.md

Webpack Analyse

Webpack 官方分析工具
```
   npm run analyze:build
```

CRACO:Create React App Configuration Override

https://github.com/gsoft-inc/craco

与 ESLint 风格不一致

"lint:json": "jsonlint --quiet src/*/.json",
"standard": "standard src/*/",
"standard:fix": "standard --fix src/*/",
rm -rf package-lock.json

Update npm

  npm install [email protected] --save-dev
  "webpack-dev-server": "^4.1.1",
  Uncaught TypeError: SocketClient is not a constructor

GitHub Proxy

首先确认自己 git 拉取代码的方式
```
  git remote -v
```

设置代理

  git config --global https.proxy 127.0.0.1:10808
  git config --global http.proxy 127.0.0.1:10808
  git config --global http.proxy 'socks5://127.0.0.1:10808'
  git config --global https.proxy 'socks5://127.0.0.1:10808'

查看代理是否成功
```
  git config --get --global http.proxy
```
查看 git 配置
```
  git config --global --list
```

取消代理

  git config --global --unset http.proxy
  git config --global --unset https.proxy

pm-keeper

https://www.npmjs.com/package/pm-keeper

npm i && npm ci

npm ci vs. npm install

Husky 不起作用解决方案

参考官网：https://typicode.github.io/husky/#/ 按以下步骤进行设置：

删除 .git 目录下的 hooks 及 .husky
查看 git config 配置是否存在 core.hookspath=.husky
```
  git config --list
```

删除配置及卸载 Huksy:

  npm uninstall husky && git config --unset core.hookspath

再次安装 Husky:

  npm install husky --save-dev
  // npm set-script prepare "husky install"
  npx husky-init

新增 Hooks：

  npx husky add .husky/pre-commit "npx lint-staged"
  npx husky add .husky/pre-commit "npx pretty-quick --staged"
  npx husky add .husky/commit-msg 'npx --no-install commitlint --edit'

Show your support

If you like the project, give it a star ⭐️, it will be a great encouragement to me.

wkylin / pro-react-admin Goto Github PK

pro-react-admin's Introduction