启用 BFF

和之前章节一样，我们同样使用生成器来启用 BFF。

在项目根目录下执行 pnpm run new 命令：

# 启用可选功能
❯ 启用「BFF」功能
  ...

# 请选择 BFF 类型
❯ 函数写法
  框架写法

# 请选择运行时框
❯ Express
  Koa
  Egg
  Nest

注

函数模式与框架模式都是基于 Modern.js 的 BFF 函数的，两种模式的主体都是函数，也都需要运行时框架的支持，这里的提问是为了提供不同的样板文件。更多相关内容可以查看一体化 BFF 专题。

我们先选择【 函数写法 】，并选择运行时框架为 Express，项目结构将变成：

.
├── .vscode/
├── api/
│   ├── info/
│   │   └── [type].ts
│   ├── .eslintrc.json
│   ├── _app.ts
│   └── index.ts
├── src/
│   ├── contacts/
│   │   ├── components/
│   │   │   ├── Avatar/
│   │   │   │   ├── index.stories.tsx
│   │   │   │   └── index.tsx
│   │   │   └── Item/
│   │   │       ├── index.test.tsx
│   │   │       └── index.tsx
│   │   ├── styles/
│   │   │   └── utils.css
│   │   ├── App.css
│   │   └── App.tsx
│   ├── landing-page/
│   │   └── pages/
│   │       ├── comments/
│   │       │   └── [commentTitle]/
│   │       │       └── index.tsx
│   │       ├── _app.tsx
│   │       ├── docs.tsx
│   │       └── index.tsx
│   ├── .eslintrc.json
│   └── modern-app-env.d.ts
├── .editorconfig
├── .gitignore
├── .npmrc
├── .nvmrc
├── README.md
├── package.json
├── pnpm-lock.yaml
└── tsconfig.json

新增的 api/ 目录，跟 src/ 目录一样是源代码目录，目录中有几个示范用法的样板文件

package.json 中则会增加 BFF 插件：

+ "@modern-js/plugin-bff"
+ "@modern-js/plugin-express"
+ "express"

在函数写法中，BFF 的 API 路由也遵循类似【 约定式路由 】的生成逻辑。

Modern.js Serverless BFF 的默认前缀为 /api，例如上述目录结构可以得到两个 API 路由：

http://localhost:8080/api

http://localhost:8080/api/info/:type

---

本小节的代码可以在这里查看。