- React: v17.0.2 React
- React Router: v5.2.0 React Router
- Webpack:v5.50.0 Webpack
- Babel: v7.13.14 Babel, Versions
- Antd: v4.15.0 Ant Design
- Redux Hooks: v4.0.5 Redux Hooks
- 推荐 nvm 进行本地 node 版本管理，nrm 进行本地 npm registry 管理
mac: npm install -g nvm nrm
win: nvm-windows nodist nvs
nvm install 14.16.1
nvm use 14.16.1
"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",
}- Settings >> Languages & Frameworks >> Javascript >> Webpack: 指定 Configuration file: webpack\webpack.common.js
-
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/\""
- 修改代码
- git add . / git cz
- 修改 package.json 中的 version
- 运行生成 changelog 命令，最好将命令集成到 package.json 的 scripts 中
- 手动 Tag， Push 等
// mock index.js
npm run dev:faker 1. git clone https://github.com/wkylin/promotion-web.git
2. cd promotion-web
3. 可以选择以下两种方式的任一方式启动项目, 其他 cli 参考 package.json 中的 scripts
- npm start
- npm run dev:faker 与后端接口约定后，在没有提供接口时前端可以来模拟后端返回数据
- npm run pm2:server
- npm run dev:server-
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: 更新测试 添加或者更新测试
- Deployment: [Deployment] (https://create-react-app.dev/docs/deployment)
- TypeScript: TypeScript
- Umi Hox: Hox
- Mock Server (OK)
- 单页面多页签
- TS参考
- Axios
-
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: npx husky install https://typicode.github.io/husky/#/?id=install
-
Prettierrc http://json.schemastore.org/prettierrc
-
Conflict eslint prettier Conditional (ternary) operator
// lint-staged "**/*": [ "npm run prettier:write" ], // .eslintrc.json "extends": ["plugin:react/recommended", "standard", "prettier"], // package.json "prettier:write": "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.
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 - 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"
- ErrorLens: ErrorLens
- SonarLint: https://www.sonarlint.org/
- HTTP: HTTP
20. Choose A License
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.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
-
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
-
npm run analyze:build
- "lint:json": "jsonlint --quiet src/**/*.json",
- "standard": "standard src/**/*",
- "standard:fix": "standard --fix src/**/*",
- rm -rf package-lock.json
npm install [email protected] --save-dev
"webpack-dev-server": "^4.1.1",
Uncaught TypeError: SocketClient is not a constructor