react typescript 单页应用项目如何组织？

Question

个人单页应用，主要是画图应用。
包含了核心库及界面操作

核心库打算用typescript开发，打算在windows下面挂一个实例
界面打算用react进行开发，包括按钮/菜单栏/状态栏等，页准备用typescript开发

项目应该如何组织和编译呢呢？有没有类似的starter项目或者类似思路的项目可以参考一下？

谢谢

Answer 1

我之前做了个首页，技术栈选型跟你的需求有点类似，虽然不完善，但可以提供一个思路给你: anran758.github.io

主要技术栈：react / typescript / webpack

大致的项目结构设计如下：

/build            # project 构建相关的脚本与配置
/build/**           # 略
/config           # 网站通用配置
/config/**          # 略
/src              # 源码目录
/src/components     # 公共组件
/src/constant       # 公共常量
/src/hooks          # hooks
/src/images         # 公共图片
/src/layout         # 全局布局
/src/pages          # 页面
/src/router         # 路由
/src/static         # 静态文件，会被 webpack copy 到输出目录
/src/styles         # 全局/公共样式
/src/utils          # 工具类
/src/.eslintrc.js   # eslint 的配置
/src/index.tsx      # React App entry
/src/typing.d.ts    # typescript global type

因为我个人有一些想要展示的 demo 打算也在网站中一起打包，因此 pages 下不是单纯的 SPA, 而是做了区分。

/src/pages/App    # React APP page
/src/pages/demos  # 多页面 HTML，下面每个目录都是单独的 Page

路由方面兼容多页面路由，React APP 使用哈希路由，多页面就按照正常路径访问。对应的路径名可以通过 webpack 进行修改。

公共的组件可以放在 /src/components, 很多基础的 UI 组件都是自己实现了，主要是用了练练手。也可以直接引入第三方的 UI 库，例如 Antd

该项目的状态并不算复杂，状态管理的选型就看个人喜好咯~