写在前面
最近对自己的技术栈进行了一个复盘，希望有一个可以比较详细的输出内容。
这里讲诉了一个从0到1实现一个TS的React项目框架。同时也加入了一些优化的内容。
有的同学会对架构工作保持怀疑，会说使用cra生成以后开始干了完了，又何必大费周折去做这些工作呢？我们可以理解架构工作是为了程序员服务的。好的架构可以
- 提高开发效率，统一封装的接口、公共的组件，可以保证开发时候即开即用，节约开发周期
- 统一代码风格，便于后期维护
- 保证代码质量，加入的
eslint检测，可以增加代码可阅读性和维护性 - 减少代码差异性
在动手前先梳理了项目搭建需要做的一些事情，也会按照梳理的顺序一步一步往下实现：
- 项目目录搭建
- 重写webpack
- eslint检测
- network封装
- 数据mock
- context用例
- redux封装
- 路由封装
- 调色板
- commit阶段检测
源码
- 待提交
创建过程
1. 创建项目
概要
- 通过脚手架创建了一个TS的React项目
- 创建和修改目录，并说明每个目录的目的和用途 详情
- 创建目录
2. 重写webpack
概要
- 方案选择
- 实现功能和方法
详情
3. eslint检测
概要
- 根据不同类型(
命名、模块、React、编码风格、注释)进行不同规则的约束
详情
4. network封装
概要
- 统一配置、统一处理
- 取消请求
详情
5. 数据mock
概要
- 方案选择
- 配置和启动方式
详情
6. context用例
概要
- Context的使用例子
详情
7. redux封装
概要
- redux-thunk
详情
8. 路由封装
概要
- Hash模式和History模式区别
- 使用方法
详情
9. 调色板
概要
- 调色板
详情
10. commit检测
概要
pre-commit钩子的代码检测commit-msg钩子的commit信息检测
详情
总结
以上，一套完整的React项目已经基本完成，为什么说基本呢？因为除了上面之外，一个标准的项目，还应该提供使用案例，对特有的项目应该封装常用的公共组件。这些都不在这里展开
