Frontend技术栈 Tech Stack

• ORM: prisma
• Package Manager: pnpm
  • what does pnpm differ from npm?
• Style:
  • Tailwind is a CSS framework that speeds up the development process by allowing you to quickly write utility classes directly in your TSX markup.
  • font: google font https://fonts.google.com/knowledge/glossary/subsetting
• HTML
• CSS
• JS

  • tsx

  • jsx

CSS解决方案

PostCSS + CSS Modules

工具库

• "ramda": "^0.26.1" 工具函数库
• "numeral": "^2.0.6" 数字格式化
• "query-string": "^6.8.3" Url查询字符串处理
• "uuid": "^3.3.3" 唯一ID生成工具
• "semver": "^7.3.4" 版本号格式化
• "http-status-codes": "^1.3.2" Http状态码解析
• "bignumber.js": "^9.0.0" 长整数处理

单元测试及代码规范

Jest + StandardJS

• 代码规划相关
  • "husky": "^3.0.3"
  • "lint-staged": "^9.2.1"
  • "eslint": "^6.6.0"
  • "eslint-config-standard": "^14.1.0"
  • "eslint-import-resolver-typescript": "^2.0.0"
  • "eslint-plugin-import": "^2.18.2"
  • "eslint-plugin-jest": "^24.0.2"
  • "eslint-plugin-node": "^10.0.0"
  • "eslint-plugin-prettier": "^3.1.1"
  • "eslint-plugin-promise": "^4.2.1"
  • "eslint-plugin-react": "^7.16.0"
  • "eslint-plugin-react-hooks": "^2.3.0"
  • "eslint-plugin-standard": "^4.0.1"
  • "fork-ts-checker-webpack-plugin": "^1.5.0"

其他

• 拖拽解决方案
  • "react-dnd": "^10.0.2"
  • "react-dnd-html5-backend": "^10.0.2"
• "react-infinite-scroller": "^1.2.4" 虚拟滚动
• "html2canvas": "^1.0.0-rc.7" 前端截屏
• "react-highlight-words": "^0.16.0" 关键字高亮
• "react-google-login": "^5.0.5" Googel登录
• "fontsource-roboto": "^3.0.3" Roboto字体处理
• "react-sortable-hoc": "^1.11.0" 拖动排序高阶组件