Pro React Admin
项目特性
- 升级 Antd 5.0， 实现亮白与暗黑主题切换，并自定义组件主题，且组合紧凑算法实现相关主题
- 基于 React 最新版本，拥抱 Hooks
- 基于 React Router V6, 实现嵌套路由更方便
- 基于 Webpack 最新版本，实现多环境打包部署，代码分割优化，结合官方分析工具，实时优化代码
- 同时 支持 vite, 极速构建
- 基于 Faker 实现 Mock Server,不依赖后端实现模拟数据更加方便
- 封装 Fetch, 实现 useFetch, 请求更加方便，取消请求，实现请求及响应拦截，方便数据处理及统一报错提示
- 支持 TypeScript, 一切变得可控，扼杀错误于摇篮之中
- 支持多页签，提升效率
- 代码风格统一，项目统一配置 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: v4.x.xTypeScript
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 标准化
-
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/\""
约定式提交
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://theodorusclarence.com/library/conventional-commit-readme
React Code Splitting Library
Mock Server
// mock index.js
npm run dev:fakerDeployment
-
Deployment: [Deployment] (https://create-react-app.dev/docs/deployment)
-
Deploy gh-pages:
"predeploy": "npm run build:production", "deploy": "gh-pages -d dist",
待解决
- 配备比较完善的脚手架：
- 完善文档：
- CacheRoute: react-router-cache-route
Docusaurus
- Github:
- Demo:
已支持特性
- TypeScript: TypeScript
- Mock Server
- 单页面多页签参考
- Axios
- React SVGR
代码规范：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.
-
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",
自动化持续代码审查工具
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"
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.
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-hookPlugins
HTTP
- HTTP: HTTP
Code Contributors
Choose A License
Server: Dev, Test, UAT(Live), Staging, Demo, Production
Copyright (c) 2021 Promotion Web Licensed under the Apache License.
NPM version
npm version [| major | minor | patch | premajor | preminor | prepatch | prerelease [--preid=[alpha, beta, rc]] | from-git]
Git Tag
- git tag -a v1.2.0 -m "version: 1.2.0"
- git push origin v1.2.0
- git push origin --tags
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
. ├── webpack/ │ ├── webpack.prod.js │ ├── webpack.dev.server.js │ ├── webpack.dev.js │ ├── webpack.common.js │ ├── process.js │ ├── paths.js │ └── dev.server.js ├── src/ │ ├── utils/ │ ├── styles/ │ ├── store/ │ ├── service/ │ ├── routers/ │ ├── reducers/ │ ├── pages/ │ ├── index.js │ ├── components/ │ ├── assets/ │ ├── actions/ │ └── App.js ├── public/ │ ├── robots.txt │ ├── manifest.json │ ├── index.ejs │ └── favicon.ico ├── postcss.config.js ├── package.json ├── package-lock.json ├── faker/ │ ├── utils/ │ ├── shops/ │ ├── index.js │ └── app/ ├── docker-compose.yml ├── dist/ │ ├── static/ │ ├── index.html │ └── favicon.ico ├── babel.config.js ├── README.md ├── Dockerfile └── CHANGELOG.md
Webpack Analyse
-
npm run analyze:build
CRACO:Create React App Configuration Override
与 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 constructorGitHub 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
npm i && npm ci
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