228 lines
6.4 KiB
Markdown
228 lines
6.4 KiB
Markdown
# Monorepo 架构设计方案
|
||
|
||
## 变更概述
|
||
|
||
将现有的 `frontend` 项目和空的 `FrontendDesigner` 项目整合为 Monorepo 架构，实现统一的管理、开发、构建和部署流程。
|
||
|
||
## 现状分析
|
||
|
||
### 当前项目状况
|
||
- **frontend**: 已运行的Vue3项目，使用Element Plus、Vue Router、Pinia等技术栈
|
||
- **FrontendDesigner**: 空文件夹，预备后续使用
|
||
- **当前问题**:
|
||
- 两个项目分散管理，依赖重复
|
||
- 无法共享组件和工具库
|
||
- 构建和部署流程独立，维护成本高
|
||
- 无法统一管理依赖版本
|
||
|
||
### 技术栈统一性
|
||
两个项目都基于Vue3生态：
|
||
- Vue 3 + Vite
|
||
- Element Plus UI框架
|
||
- 国际化支持
|
||
- 响应式设计
|
||
|
||
## 解决方案
|
||
|
||
### Monorepo 架构设计
|
||
|
||
#### 1. 项目结构设计
|
||
```
|
||
d:\work\Aiproject\DeotalandAi/
|
||
├── package.json # 根级别依赖和脚本
|
||
├── pnpm-workspace.yaml # pnpm工作空间配置
|
||
├── turbo.json # Turborepo任务配置
|
||
├── .eslintrc.base.json # 基础ESLint配置
|
||
├── .prettierrc # Prettier配置
|
||
├── README.md # Monorepo项目说明
|
||
├── apps/ # 应用项目
|
||
│ ├── frontend/ # 主前端应用
|
||
│ │ ├── package.json
|
||
│ │ ├── vite.config.js
|
||
│ │ └── src/
|
||
│ └── designer/ # 设计器应用
|
||
│ ├── package.json
|
||
│ ├── vite.config.js
|
||
│ └── src/
|
||
├── packages/ # 共享包
|
||
│ ├── ui/ # UI组件库
|
||
│ │ ├── package.json
|
||
│ │ └── src/
|
||
│ ├── utils/ # 工具库
|
||
│ │ ├── package.json
|
||
│ │ └── src/
|
||
│ └── config/ # 配置文件
|
||
│ ├── package.json
|
||
│ └── src/
|
||
├── scripts/ # 构建脚本
|
||
│ ├── build.js
|
||
│ ├── dev.js
|
||
│ └── deploy.js
|
||
└── docs/ # 项目文档
|
||
└── monorepo-guide.md
|
||
```
|
||
|
||
#### 2. 依赖管理策略
|
||
|
||
##### 根级别依赖
|
||
```json
|
||
{
|
||
"devDependencies": {
|
||
"turbo": "^1.10.0",
|
||
"concurrently": "^8.2.0",
|
||
"rimraf": "^5.0.0",
|
||
"@vitejs/plugin-vue": "^6.0.1",
|
||
"vite": "^7.2.2",
|
||
"eslint": "^8.45.0",
|
||
"prettier": "^3.0.0"
|
||
}
|
||
}
|
||
```
|
||
|
||
##### 工作空间依赖管理
|
||
- **开发依赖**: 集中在根级别，避免重复安装
|
||
- **应用依赖**: 每个应用独立管理其特定依赖
|
||
- **共享依赖**: 在packages中统一管理，共用版本
|
||
|
||
#### 3. 构建系统设计
|
||
|
||
##### Turborepo任务配置
|
||
```json
|
||
{
|
||
"pipeline": {
|
||
"build": {
|
||
"dependsOn": ["^build"],
|
||
"outputs": ["dist/**"]
|
||
},
|
||
"dev": {
|
||
"cache": false,
|
||
"persistent": true
|
||
},
|
||
"lint": {},
|
||
"test": {}
|
||
}
|
||
}
|
||
```
|
||
|
||
##### 开发脚本
|
||
- `pnpm dev`: 启动所有应用开发服务器
|
||
- `pnpm build`: 构建所有项目
|
||
- `pnpm lint`: 检查所有项目代码规范
|
||
- `pnpm clean`: 清理所有构建产物
|
||
|
||
#### 4. 组件共享策略
|
||
|
||
##### UI组件库 (`packages/ui`)
|
||
- **设计系统**: 统一的主题、颜色、字体
|
||
- **基础组件**: 按钮、输入框、卡片等
|
||
- **业务组件**: 特定的业务逻辑组件
|
||
- **按需导入**: 支持按需加载，减少bundle大小
|
||
|
||
##### 工具库 (`packages/utils`)
|
||
- **API请求**: 统一的HTTP客户端
|
||
- **格式化工具**: 日期、数字、本地化格式化
|
||
- **验证器**: 表单验证规则
|
||
- **存储工具**: localStorage/sessionStorage封装
|
||
|
||
##### 类型定义 (`packages/types`)
|
||
- **接口定义**: 统一的TypeScript接口
|
||
- **API类型**: 后端接口类型定义
|
||
- **组件Props**: Vue组件Props类型
|
||
|
||
#### 5. 配置共享
|
||
|
||
##### Vite配置
|
||
- **基础配置**: 在根级别定义通用配置
|
||
- **特定配置**: 各应用可覆盖特定配置
|
||
- **环境变量**: 统一的环境变量管理
|
||
|
||
##### ESLint/Prettier配置
|
||
- **统一代码风格**: 跨项目一致的代码规范
|
||
- **自动修复**: 集成pre-commit hook
|
||
- **GitHub Actions**: CI/CD中的代码检查
|
||
|
||
#### 6. 开发体验优化
|
||
|
||
##### 文档系统
|
||
- **Storybook**: 组件文档和预览
|
||
- **类型文档**: 自动生成API文档
|
||
- **架构文档**: Monorepo使用指南
|
||
|
||
##### 开发工具
|
||
- **VS Code工作区**: 统一的项目配置
|
||
- **调试配置**: 跨应用的调试设置
|
||
- **热重载**: 保持跨包的热更新能力
|
||
|
||
#### 7. 部署策略
|
||
|
||
##### 独立部署
|
||
- 每个应用可独立部署到不同环境
|
||
- 支持不同的CI/CD流水线
|
||
- 独立的域名和子域名配置
|
||
|
||
##### 构建优化
|
||
- **并行构建**: 利用Turbo的并行能力
|
||
- **缓存策略**: 本地和远程缓存
|
||
- **产物复用**: 避免重复构建
|
||
|
||
#### 8. 迁移策略
|
||
|
||
##### 阶段一: 基础设施搭建
|
||
- 创建Monorepo结构
|
||
- 配置pnpm工作空间
|
||
- 设置Turbo任务
|
||
|
||
##### 阶段二: 项目迁移
|
||
- 将frontend迁移到apps/frontend
|
||
- 重构依赖关系
|
||
- 共享基础配置
|
||
|
||
##### 阶段三: 组件提取
|
||
- 提取公共组件到packages/ui
|
||
- 提取工具函数到packages/utils
|
||
- 统一类型定义
|
||
|
||
##### 阶段四: 优化完善
|
||
- 完善文档和CI/CD
|
||
- 性能优化
|
||
- 开发者体验改进
|
||
|
||
## 收益分析
|
||
|
||
### 开发效率
|
||
- **依赖共享**: 减少重复依赖，节省磁盘空间
|
||
- **代码复用**: 组件和工具库统一管理
|
||
- **统一规范**: 跨项目一致的代码风格
|
||
- **快速启动**: 一个命令启动所有项目
|
||
|
||
### 维护成本
|
||
- **版本统一**: 依赖版本统一管理，避免冲突
|
||
- **集中配置**: 配置文件统一管理
|
||
- **自动化流程**: 减少手动操作，降低错误率
|
||
|
||
### 团队协作
|
||
- **跨项目协作**: 更容易进行跨应用的功能开发
|
||
- **知识共享**: 统一的文档和最佳实践
|
||
- **新人上手**: 单一项目结构，降低学习成本
|
||
|
||
## 风险评估
|
||
|
||
### 技术风险
|
||
- **复杂度增加**: Monorepo结构相对复杂
|
||
- **构建时间**: 大型项目可能影响构建速度
|
||
- **依赖冲突**: 需要仔细管理依赖版本
|
||
|
||
### 缓解措施
|
||
- **渐进迁移**: 分阶段实施，降低风险
|
||
- **充分测试**: 完整的测试覆盖
|
||
- **文档完善**: 详细的使用指南
|
||
|
||
## 结论
|
||
|
||
Monorepo架构将为DeotalandAi项目带来显著的开发效率提升和维护成本降低，同时为未来的扩展提供良好的基础架构。建议采用渐进式迁移策略，确保平稳过渡。
|
||
|
||
---
|
||
**变更ID**: monorepo-architecture-design
|
||
**创建时间**: 2025-11-18
|
||
**作者**:
|
||
**状态**: 待确认 |