SuperAPI AI 工具集

flpbalada-project-structure

编程与开发

查看项目

更新于 10-16 00:30

技能介绍

用途:指导 React/Next.js/TypeScript 项目按功能/领域而非文件类型组织代码,适用于新建项目、重构代码库或判断某段代码应放在哪里。核心原则是按 feature/domain 组织,并强制单向代码流:shared → features → app。

顶层结构:src 下包含 app(路由与 provider)、assets、components(共享 UI)、config、features(主要业务代码)、hooks、lib(预配置库如 axios、dayjs)、stores(全局状态)、testing、types、utils。每个 feature 为自包含模块,可按需包含 api、components、hooks、stores、types、utils,不必创建空目录。

依赖规则:app 可引用 features 与 shared(components、hooks、lib、types、utils);features 只能引用 shared;shared 只能引用其他 shared 模块。features 之间不可互相引用,需要组合时在 app 层完成。

代码归属决策:路由/页面组件放 app/routes;功能专属组件放 features/[name]/components;可复用 UI 放 components;功能 API 调用放 features/[name]/api;共享工具放 utils;功能工具放 features/[name]/utils;全局状态放 stores;功能状态放 features/[name]/stores;库封装放 lib;全局类型放 types;功能类型放 features/[name]/types。

ESLint 强制:使用 import/no-restricted-paths 规则。禁止跨 feature 导入,可为每个 feature 配置 target/from/except;同时限制 features 不可从 app 导入,shared 不可从 features 或 app 导入。

常见模式:feature API 可配合 React Query(useQuery 封装);feature 组件引用本 feature 的 api 与 components;在 app 层组合多个 feature 组件。

反模式:不要使用 barrel 文件(index.ts 再导出,会破坏 Vite tree-shaking);不要跨 feature 导入,应上提到共享组件;不要把仅单个 feature 使用的组件放入共享目录。

Next.js App Router 适配:app 目录保留路由与布局,feature 的非路由代码仍放在 features;路由处理器保持精简,委托给 feature 模块。建议设置 @/ 路径别名并配置 ESLint 限制。

限制:资料主要提供目录约定、依赖方向与 ESLint 配置示例,未提供安装命令、价格、平台支持范围或性能效果数据;具体工程落地需结合项目实际调整。