Vite + TypeScript 项目工程化:目录规范与质量门禁
当项目规模变大,问题往往不是“能不能写出功能”,而是“能不能长期稳定迭代”。工程化的价值就在于把个人习惯变成团队共识。
1. 目录分层先行
目录设计建议以“业务域 + 通用能力”双维拆分:页面按业务模块组织,通用逻辑放到 shared 层,避免 utils 无边界扩张。
- pages:路由页面。
- components:跨页面复用组件。
- features:领域能力与状态聚合。
- shared:工具函数、常量、类型定义。
2. TypeScript 规则明确化
不建议在核心业务中使用 any。可以从“核心模块 strict,外围模块渐进收敛”开始,逐步提高类型覆盖率。
- 开启 noImplicitAny、strictNullChecks。
- 公共函数必须显式声明输入输出类型。
- 接口层统一 DTO 与 Domain Model 的映射。
3. 质量门禁自动化
质量门禁不能靠口头要求,必须靠自动化流程固化。至少包括三层:本地校验、提交校验、CI 校验。
- 本地执行 lint 与 type-check。
- commit 前通过 lint-staged 只检查变更文件。
- CI 中强制执行 test、build、静态扫描。
4. 版本与发布管理
推荐约定式提交(Conventional Commits),结合自动生成 changelog。每次发布要能追踪“改了什么、影响什么、如何回滚”。
5. 结语
工程化不是工具堆砌,而是把交付质量前置。目录规范、类型约束、自动化门禁三者结合,才能真正降低维护成本。