rerumaccusamus
Version:
The meta-framework suite designed from scratch for frontend-focused modern web development.
94 lines (76 loc) • 2.59 kB
Markdown
title: 启用 BFF
和之前章节一样，我们同样使用生成器来启用 BFF。
在项目根目录下执行 `pnpm run new` 命令：
```bash
# 启用可选功能
❯ 启用「BFF」功能
...
# 请选择 BFF 类型
❯ 函数写法
框架写法
# 请选择运行时框
❯ Express
Koa
Egg
Nest
```
:::note 注
函数模式与框架模式都是基于 Modern.js 的 BFF 函数的，两种模式的主体都是函数，也都需要运行时框架的支持，这里的提问是为了提供不同的样板文件。更多相关内容可以查看[一体化 BFF 专题](/docs/guides/features/server-side/bff/function)。
:::
我们先选择【 函数写法 】，并选择运行时框架为 Express，项目结构将变成：
```md
.
├── .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 插件：
```json
+ "@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`
> 本小节的代码可以在[这里查看](https://github.com/modern-js-dev/modern-js-examples/tree/main/tutorials/c09/hello-modern-2)。