SuperAPI AI 工具集

remix-project-layout

通用与其它

查看项目

更新于 10-16 09:50

技能介绍

用途:在定义、审查或初始化 Remix 应用的磁盘布局时使用。它关注结构与约定,说明代码应放在哪里、路由归属如何映射到磁盘文件,以及应用规模增长后如何组织。若用户需要新建应用脚手架,应运行内置脚本,而不是手工重建起始文件。

根目录约定:app/ 存放运行时应用代码;db/ 存放数据库产物(如迁移和 SQLite 文件);public/ 存放按原样提供的静态文件;test/ 存放共享测试辅助、fixture 和跨应用集成覆盖;tmp/ 存放运行时临时文件(上传、缓存、本地会话文件)。

app/ 内按职责划分:assets/ 放客户端入口与客户端行为;controllers/ 放路由自有处理器与路由局部 UI;data/ 放 schema、查询、持久化设置与运行时数据初始化;middleware/ 放请求生命周期相关逻辑(认证、会话、数据库注入、上传);ui/ 放跨路由共享 UI 基础组件;utils/ 放真正跨层的运行时辅助;routes.ts 为路由契约;router.ts 为路由设置与接线。

放置优先级:优先放入最窄的归属方。属于单个路由就随该路由;跨路由区域复用但仍属 UI 则移到 app/ui/;属于请求生命周期设置则留在 app/middleware/;属于 schema、查询、持久化或启动数据逻辑则留在 app/data/;仅当确实跨层且不属于其他 app 层时才用 app/utils/。宁可把代码移到更窄的归属方,也不要引入通用共享桶。

路由归属与文件结构:应能从 app/routes.ts 中的路由键立即找到实现。单导出 BuildAction 实现的扁平叶路由使用 app/controllers/ 下的扁平文件,如 routes.home -> app/controllers/home.tsx、routes.about -> app/controllers/about.tsx、routes.search -> app/controllers/search.tsx、routes.uploads -> app/controllers/uploads.tsx;此类文件自包含,仅供该路由使用的辅助组件保留在同一模块。由 Controller 实现、拥有嵌套子路由或多个动作时使用含 controller.tsx 的文件夹,如 routes.contact -> app/controllers/contact/controller.tsx、routes.auth -> app/controllers/auth/controller.tsx、routes.account、routes.cart 同理。嵌套路由对象需在磁盘上镜像嵌套,如 routes.auth.login -> app/controllers/auth/login/controller.tsx、routes.account.settings -> app/controllers/account/settings/controller.tsx、routes.account.orders、routes.cart.api、routes.admin.users 同理。

共享 UI 与局部 UI:跨路由区域复用的 UI 放 app/ui/,如 document.tsx、layout.tsx、form-field.tsx、restful-form.tsx;仅当组件由某路由或控制器功能拥有时才留在控制器文件夹内。仅被一个 action 或控制器功能使用的页面组件或辅助文件保留在所属路由旁,如 app/controllers/contact/page.tsx、app/controllers/auth/login/page.tsx、app/controllers/admin/books/form.tsx、app/controllers/books/index-page.tsx;扁平叶 action 的路由局部 UI 与 action 同文件。晋升规则:扁平叶文件后来长出子路由或多个动作时,从 app/controllers/home.tsx 晋升为 app/controllers/home/controller.tsx,仅在确实需要时进行,不要为每个叶路由预先创建控制器文件夹。

命名约定:controller.tsx 为控制器入口;page.tsx 为单个控制器拥有的页面模块;index-page.tsx、show-page.tsx、edit-page.tsx、form.tsx 用于资源式控制器 UI;扁平 action 文件以路由键命名,如 home.tsx、about.tsx、search.tsx、uploads.tsx;同址测试以路由归属方命名,如 home.test.ts 或 controller.test.ts。已有约定适用时不要另创命名方案。

脚手架:用户要把此布局搭进新目录时运行:node skills/remix-project-layout/scripts/bootstrap_remix_application.ts <target-dir>。可选标志:--app-name <name> 覆盖生成的 app 名称,--remix-version <version> 覆盖默认 Remix 版本,--force 写入非空目标目录。脚本生成起始应用,包括 README.md、路由处理器、共享 UI、测试辅助及本技能描述的根目录结构。

反模式:不要创建 app/lib/ 作为通用倾倒场;不要在 app/ui/ 已承担共享 UI 角色时再建 app/components/ 作为第二个共享 UI 桶;不要把跨路由共享 UI 放进 app/controllers/;不要把路由拥有的页面模块放进 app/ui/;属于 app/middleware/ 的中间件、会话、认证或数据库生命周期辅助不要放 app/utils/;属于 app/data/ 的 schema、查询或数据库设置代码不要放 app/utils/;除非是真正的控制器,不要为简单叶 action 创建文件夹;不要把单一 action 拆到多个文件;不要创建 helpers.ts、common.ts、misc.ts 等含糊文件名,除非名称对模块归属确实准确。