跳到主要内容

项目结构

Monorepo​

基础​

  • 使用一个 git 仓库管理多个项目；

优点​

  • 代码和资源复用；
    • 各个子包轻松共享依赖，代码，工具类，类型和组件；
  • 统一的版本管理：统一管理所有项目的版本，避免版本冲突；
  • 集中的构建和部署：统一的构建和部署流程；
  • 项目测试：无需跨多个仓库协调测试；
  • 协作：易于进行跨项目的协作；

缺点​

  • 仓库大小；
  • 版本控制的复杂性；
  • 构建和部署的复杂性；
    • 构建时间过长；
    • 流程和配置复杂；
      • 依赖关系，部署顺序，版本控制。。。
  • 代码权限管理的复杂性；

生态​

  • 包管理：npm/yarn/pnpm；
  • 包版本：lerna/changesets；
  • 包构建：turborepo/nx；

项目结构​

前端​

组件层级​

原子组件​
  • 功能独立，规模较小的组件；
  • 暴漏数据接口和逻辑接口，无业务逻辑；
业务组件​
  • 根据业务逻辑对原子组件的组合和封装；

文件层级​

文件结构​
├─src               #  项目目录
│  ├─assets             #  资源
│  ├─api                #  api 防腐层
│  ├─config             #  配置
│  ├─components         #  公共组件
│  ├─hooks              #  自定义hooks组件
│  ├─routes             #  路由
│  ├─store              #  全局状态管理
│  ├─feature            #  功能
│  │  └─components      #  组件
│  │  ├─hooks           #  自定义hooks组件
│  │  ├─store           #  状态管理
│  │  └─index.ts        #
│  ├─pages              #  页面
│  ├─utils              #  工具
│  └─main.ts            #  入口文件
feature 文件夹​
  • feature 是对不同 page 中复用的业务组件进行封装；
  • 若 page 较少的情况下，可不使用该文件夹；
index 文件用法​
  • import 路径指向文件夹时，优先寻找并访问其 index 文件；
  • 将文件夹内所有组件同一在 index 文件导出，使用组件时不需要具体到组件所在文件；
// index.ts
export { default as useData } from "./use_data";
export { default as useKeys } from "./use_keys";
// 使用文件
import { useKeys } from "../../hooks";

后端​

文件夹层级​
├─src                   #  项目目录
│  ├─config             #  配置文件
│  ├─feature            #  功能文件夹
│  │  └─type            #  ts 类型
│  │  └─controller      #  业务逻辑流程
│  │  ├─service         #  业务逻辑具体实现, 脱离服务器框架
│  │  ├─dao             #  数据库逻辑, 脱离服务器框架
│  │  ├─util            #  工具函数
│  │  └─index.ts        #  导出文件
│  ├─util               #  全局工具函数
│  ├─app                #  服务器框架相关文件
│  └─main.ts            #  入口文件