跳到主要内容

什么是 evjs?

evjs 是一个 React 全栈框架,适合需要文件页面、可选服务端能力,以及从本地开发到部署都有清晰路径的应用。

它围绕一个简单想法设计:一个页面目录应该同时容纳页面、页面配置以及属于这个页面的代码。文件系统描述应用的公开结构;配置只补充无法安全推断的行为。

应用模型​

一个 evjs 项目通常由三类主要目录和文件组成:

my-app/
├── ev.config.ts
└── src/
├── pages/ # React 页面和布局
│ ├── page.tsx # /
│ └── users/
│ └── $userId/
│ └── page.tsx # /users/:userId
└── apis/ # 公共 HTTP 端点
└── health/
└── api.ts # /health
  • page.* 文件发布一个 React 页面,所在目录决定 URL。
  • 可选的相邻 page.config.ts 选择元信息、渲染方式和页面级插件行为。
  • api.* 文件使用标准 Request 和 Response 发布 HTTP 端点。
  • 被应用引用且以 "use server"; 开头的模块,会暴露可通过框架传输层调用的命名操作。

不匹配这些文件约定的内容就是普通应用源码。组件、Hook 函数、模型、测试和服务端函数都 可以放在使用它们的页面旁边。

evjs 负责什么​

evjs 为应用中重复出现的框架工作提供默认能力:

  • 发现页面与 API 路由;
  • 创建浏览器与服务端入口;
  • 导航、参数、布局与路由边界;
  • 逐页选择 CSR、SSR、SSG、PPR 与 RSC;
  • 本地开发与生产构建;
  • 应用级和页面级插件配置;
  • 面向静态、Node.js 与 Edge 环境的可部署产物。

你可以通过配置和插件替换其中某些默认行为,而不必重新定义整个应用。

一棵页面树,两种导航模型​

同一棵 src/pages 目录树既可以构建为 SPA,也可以构建为 MPA:

模式适合场景导航方式
SPA需要嵌套或动态路由的单页应用浏览器路由器在页面间切换,无需整页刷新。
MPA相互独立的静态页面每个页面对应一份 HTML 文档,浏览器导航会加载新文档。

切换模式不需要移动页面,也不需要学习另一种页面格式。MPA 有意只支持静态路径;动态路径和浏览器路由边界属于 SPA 应用。

需要时再加入服务端代码​

应用可以保持纯浏览器运行,也可以只加入少量服务端函数、提供公共 HTTP 路由,或让选定页面在服务端渲染。这些能力使用同一套请求上下文,可以整体部署,也可以分别部署到静态主机与服务端源站。

团队可以从小型客户端应用开始,只在确有需要时加入服务端能力。

为扩展而设计​

插件可以增加集成、类型化应用选项、类型化页面选项、构建行为和部署支持。应用作者通过 ev.config.ts 安装插件;某个页面的插件选择仍放在相邻 page.config.ts 中。

即使集成发生变化,核心页面与路由模型仍保持稳定。

接下来​