基于React: v18.x.x/Webpack: v5.x.x//Vite: 4.x.x/React Router v6.x.x/ Antd: v5..x.x/Typescript: v5.x.x/Fetch Api/等最新版本进行构建的企业级中台前端基础模板...
MIT License
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
> npm install baize --location=global
> baize
"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'),
}
npm install
package.json
git commit
conventional-changelog-cli
standard-version
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/\""
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 说明文档:
https://theodorusclarence.com/library/conventional-commit-readme
// mock index.js
npm run dev:faker
Deployment: [Deployment] (https://create-react-app.dev/docs/deployment)
Deploy gh-pages:
"predeploy": "npm run build:production",
"deploy": "gh-pages -d dist",
- npm install -g snyk
- snyk auth
- snyk monitor
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",
A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.
Windi CSS: Windi CSS
TailWind CSS: TailWind CSS
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
Copyright (c) 2021 Promotion Web Licensed under the Apache License.
npm version [| major | minor | patch | premajor | preminor | prepatch | prerelease [--preid=[alpha, beta, rc]] | from-git]
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.pro.react.admin.com;
location / {
root /usr/local/var/www/pro-react-admin;
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.wkylin.com;
#}
location @rewrites {
rewrite ^(.+)$ /index.html break;
}
# 或者全部重定向
# return 301 https://$server_name$request_uri;
}
# SwitchHosts!
192.168.1.101 www.pro.react.admin.com
Nginx for Windows
1. start nginx
2. nginx -s stop
3. nginx -s quit
4. nginx -s reload
5. nginx -s reopen
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
npm run analyze:build
npm install [email protected] --save-dev
"webpack-dev-server": "^4.1.1",
Uncaught TypeError: SocketClient is not a constructor
首先确认自己 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
参考官网: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'
npx husky add .husky/prepare-commit-msg 'exec < /dev/tty && npx cz --hook || true'
If you like the project, give it a star ⭐️, it will be a great encouragement to me.