从零搭建项目(1) --- 项目及其技术栈介绍

前言

最近时间上比较宽裕，终于可以把我的个人博客项目完成，该博客包含一个正式环境和一个测试环境，使用到了包含从前端到后端再到部署的各种细碎知识点，也算是巩固了自身所学知识点，该博客99%均为TypeScript代码编写而成，对想学习TypeScript的小伙伴应该有些帮助。
这也是我个人的第一个全栈项目，由于我自己在设计上的天赋实在差到令人发指的程度(喜欢用大红大紫深蓝粉红，被公司设计师吐槽过无数次)，所以在设计上参照了这位这位老哥的博客，已获得其同意及其star，同时也欢迎大家star或者剔除pr。
正式地址
测试地址
前端源码
后端源码

文章目录

1. 项目及其技术栈介绍
2. 前端: 项目初始化
3. 前端: 使用Sass和Antd
4. 前端: 开发体验优化
5. 前端: 搭建路由和状态管理
6. 前端: 支持Axios
7. 前端: 打包与环境变量设置
8. 前端: 团队代码规范
9. 后端: 项目初始化和使用Koa相关
10. 后端: 使用TypeORM和MySQL
11. 部署: 使用nginx部署前端项目
12. 部署: 后端部署
13. 部署: 使用jenkins自动化部署

总结相关

该系列文章不涉及具体业务代码或是组件相关的写法，但会分别针对前端、后端、部署方面所使用的技术和项目模板搭建过程做出较为详细的介绍，预测整体的博客字数将会在2w字左右。
其中，前端模板的搭建原本有写过一个系列的博客，但是由于时间较为久远，有些使用到的库因为版本的迭代，如果是没有模板搭建经验进行排坑的小伙伴可能无法顺利把项目跑起来，所以在这次的系列中将会重新进行总结，当然有兴趣的老哥们也可以去该系列进行参考，链接如下:
搭建Typescript+React项目模板(1) --- 项目初始化

技术概况

• 前端

  • React: v16.9.11，全组件使用hook + React Router
  • TypeScript
  • 状态管理: useReducer + context
  • antd
  • Axios
  • WebPack4.0+ 以及一对相关插件和loader
  • Sass + CSS Modules
  • Marked + hightlight.js + CodeMirror + react-codemirror2

• 后端

  • Koa2 + koa-router + koa-bodyparser
  • TypeScript
  • TypeORM
  • MySQL

• 多人协作

  • Commitlint + Husky: git提交信息限制
  • ESlint: ts代码规范
  • Stylelint: scss代码规范
  • Prettier: 代码格式化

• 部署

  • jenkins + github webhook
  • nginx
  • 七牛cdn

• 错误监控

  • Fundebug