用途:规整 React / Next.js / TypeScript 项目的目录结构,按功能或领域而非文件类型组织代码,适合中大型项目保持功能独立与可维护。核心原则是单向代码流:shared → features → app;features 之间不可互相引用,跨功能组合在 app 层完成。
主要能力与结构:顶层目录采用 src/ 下的 app(路由、providers、router、app.tsx)、assets、components(共享 UI)、config、features(主要代码)、hooks、lib(预配置库如 axios、dayjs)、stores、testing、types、utils。每个 feature 为自包含模块,可按需包含 api(请求与 React Query hooks)、components、hooks、stores、types、utils,仅创建需要的子目录。
导入规则:app 可导入 features 与 shared;features 只能导入 shared;shared 只能导入其他 shared 模块。ESLint 可用 import/no-restricted-paths 阻止跨 feature 导入并强制单向依赖,示例配置位于资料中。
常见模式:feature 内用 React Query 封装 API 调用并导出 hook;feature 组件消费本 feature 的 hooks;在 app 层页面组合多个 feature 组件。Next.js App Router 场景下,app 目录只保留路由与最小页面,实际逻辑下沉到 features。
避免的反模式:不使用 barrel 文件(index.ts 再导出,会破坏 Vite 的 tree-shaking),改为直接导入;不跨 feature 导入,应把共用组件提升到 src/components;不把只被一个 feature 使用的组件放进共享目录。
限制与注意:资料未提供具体安装命令、版本或依赖要求;ESLint 规则需按项目实际 feature 名称逐项添加。适用前提是项目已采用 React、Next.js 或 TypeScript 技术栈。