📖 rttmoa-platform

🛫 项目功能

🚀 采用最新技术找开发：react18、react-router v6、react-hooks、typescript、vite4、antd5

🚀 采用 Vite4 作为项目开发、打包工具（配置了 Gzip 打包、跨域代理、打包预览工具…）

🚀 使用 redux 做状态管理，集成 immer、react-redux、redux-persist 开发 + redux-toolkit

🚀 使用 TypeScript 对 Axios 二次封装（错误拦截、常用请求封装、全局请求 Loading、取消重复请求…）

🚀 支持 Antd 组件大小切换、暗黑、灰色、色弱模式、i18n 国际化

🚀 使用自定义高阶组件进行路由权限拦截（403 页面）、页面按钮权限配置

🚀 支持 React-Router v6 路由懒加载配置、菜单手风琴模式、无限级菜单、多标签页、面包屑导航

🚀 使用 Prettier 统一格式化代码，集成 Eslint、Stylelint 代码校验规范（项目规范配置）

🚀 使用 husky、lint-staged、commitlint、commitizen、cz-git 规范提交信息（项目规范配置）

📑参考链接

项目 url 🚀

🌱 安装使用步骤

Clone：

# GitHub
https://github.com/rttmoa/rttmoa-platform.git

Node.js：

# 版本
node.js >= 18.18.0

Install：

# 安装
pnpm install

DataBase：

# 导入数据库
将数据导入mongodb中、直接启动项目即可

Run：

# 启动
pnpm dev

Build：

# 开发环境
pnpm build:dev

# 测试环境
pnpm build:test

# 生产环境
pnpm build:pro

Lint：

# eslint 检测代码
pnpm lint:eslint

# prettier 格式化代码
pnpm lint:prettier

# stylelint 格式化样式
pnpm lint:stylelint

commit：

# 提交代码（会自动执行 lint:lint-staged 命令）
pnpm commit

Bit：

# Build composable software
$ npm i -g @teambit/bvm
$ bvm install
$ bvm upgrade
$ bit start

📂 文件资源目录

rttmoa-platform
├─ .vscode                # vscode推荐配置
├─ public                 # 静态资源文件（忽略打包）
├─ src
│  ├─ api                 # API 接口管理
│  ├─ assets              # 静态资源文件: 图片,字体,图标
│  ├─ components          # 全局组件
│  ├─ config              # 全局配置项
│  ├─ enums               # 枚举类型
│  ├─ hooks               # 常用 Hooks
│  ├─ language            # 语言国际化
│  ├─ layouts             # 框架布局
│  ├─ routers             # 路由管理: 静态路由,动态路由
│  ├─ redux               # redux store
│  ├─ styles              # 全局样式
│  ├─ typings             # 全局 ts 声明
│  ├─ utils               # 工具库
│  ├─ views               # 项目所有页面
│  ├─ App.tsx             # 入口页面
│  ├─ main.tsx            # 入口文件
│  └─ env.d.ts            # vite 声明文件
├─ .editorconfig          # 编辑器配置（格式化）
├─ .env                   # vite 常用配置
├─ .env.development       # 开发环境配置
├─ .env.production        # 生产环境配置
├─ .env.test              # 测试环境配置
├─ .eslintignore          # 忽略 Eslint 校验
├─ .eslintrc.js           # Eslint 校验配置
├─ .gitignore             # git 提交忽略
├─ .prettierignore        # 忽略 prettier 格式化
├─ .prettierrc.js         # prettier 配置
├─ .stylelintignore       # 忽略 stylelint 格式化
├─ .stylelintrc.js        # stylelint 样式格式化配置
├─ CHANGELOG.md           # 项目更新日志
├─ commitlint.config.js   # git 提交规范配置
├─ index.html             # 入口 html
├─ LICENSE                # 开源协议文件
├─ lint-staged.config     # lint-staged 配置文件
├─ package-lock.json      # 依赖包包版本锁
├─ package.json           # 依赖包管理
├─ postcss.config.js      # postcss 配置
├─ README.md              # README 介绍
├─ tsconfig.json          # typescript 全局配置
└─ vite.config.ts         # vite 配置

🚨 浏览器支持

本地开发推荐使用 Chrome 最新版浏览器 Download。
生产环境支持现代浏览器，不在支持 IE 浏览器，更多浏览器可以查看 Can I Use Es Module。


not support	last 2 versions	last 2 versions	last 2 versions	last 2 versions

✨ 使用标准 commit 生成 CHANGELOG.MD 标准化

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
为什么使用约定式提交
1. 自动化生成 CHANGELOG。
2. 基于提交的类型，自动决定语义化的版本变更。
3. 向同事、公众与其他利益关系者传达变化的性质。
4. 触发构建和部署流程。
5. 让人们探索一个更加结构化的提交历史，以便降低对你的项目做出贡献的难度。

✨ 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: 更新测试添加或者更新测试
Devmoji 提交库
提交消息的表情符号Emojs
git commit 工具链
https://theodorusclarence.com/library/conventional-commit-readme

✨ React 代码拆分库

Loadable Components

✨ Mock Server

✨ 部署

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

Deploy gh-pages:

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

✨ Docusaurus

快速构建优化的网站

Docusaurus
⚡️ Docusaurus 将帮助您 立即发布一个漂亮的文档网站 。
💸 构建自定义技术栈成本高昂。与其如此， 不如专注于内容本身 ，直接编写 Markdown 文件就好。
💥 准备好迎接更多精彩了吗？使用版本控制、国际化、搜索和主题自定义等高级功能。
💅 查看**最佳 Docusaurus 网站**以获取灵感。**
🧐 Docusaurus 是一个静态网站生成器。它构建一个具有快速客户端导航的单页应用程序，充分利用**React的强大功能，使您的网站具有交互性。它提供开箱即用的 文档功能 ，但可用于创建 任何类型的网站 （个人网站、产品、博客、营销落地页等）。

✨ Snyk

Snyk CLI 扫描并监控您的项目是否存在安全漏洞。

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

✨ Bit

Bit 是 AI 时代连接组件和应用（从开发到持续集成）的构建系统。Bit 将源代码组织成可组合的组件，从而构建可靠、可扩展且一致的应用程序。它使 AI 代理能够通过 MCP 智能地创建和重用组件，从而避免重复并加速开发。

⚡功能

可重用组件。 创建可重用的 UI 组件和模块，以便在您的软件中重复使用。
标准构建块。 将用于创建开发人员和 AI 组件的蓝图模板定义为一个整体。
Shell 应用程序。 将可重用的组件和功能组合到应用程序 Shell 中。
高效安全的部署。 确保以简单、安全且优化的方式部署应用和服务，以进行测试和生产。

✨ 已支持特性

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

✨ VSCode 扩展

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

✨ CSS Modules

CSS模块是一个CSS文件，其中的所有类名和动画名称默认都是本地作用域。

PostCSS: PostCSS
StyleLint: StyleLint npx stylelint --help

✨ CSS Libary

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

✨ 许可证

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

Server Info

Promotion Web Licensed under the Apache License.

✨ 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.xxx-web.com;

 location / {
     root   /usr/local/var/www/xxx-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.xxx.com;
 #}
 location @rewrites {
   rewrite ^(.+)$ /index.html break;
 }
 # 或者全部重定向
 # return 301 https://$server_name$request_uri;
}

 # SwitchHosts!
 192.168.1.101 www.xxx-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.txt
Win: treee -L 2 -I "node_modules" -s -r -F > tree2.txt
Win: treee -L 3 -I "node_modules" -r -F > tree3.txt
tree node

✨ Webpack Analyse

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

✨ CRACO：创建React应用程序配置

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 css-loader@5.2.7 --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.

Name		Name	Last commit message	Last commit date
.github/workflows		.github/workflows
.husky		.husky
.vscode		.vscode
@sql		@sql
build		build
documents		documents
public		public
server		server
src		src
! _start__service.bat		! _start__service.bat
! rttmoa-platform.vsdx		! rttmoa-platform.vsdx
.editorconfig		.editorconfig
.env		.env
.env.development		.env.development
.env.production		.env.production
.env.test		.env.test
.eslintignore		.eslintignore
.eslintrc.cjs		.eslintrc.cjs
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc.cjs		.prettierrc.cjs
.stylelintignore		.stylelintignore
.stylelintrc.cjs		.stylelintrc.cjs
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
_、优化项目.md		_、优化项目.md
commitlint.config.cjs		commitlint.config.cjs
index.html		index.html
lint-staged.config.cjs		lint-staged.config.cjs
nginx.conf		nginx.conf
package-lock.json		package-lock.json
package.json		package.json
postcss.config.cjs		postcss.config.cjs
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json
vite.config.ts		vite.config.ts

Latest commit

History

Folders and files

Repository files navigation