npm 包 bffs 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在现代 Web 应用中，随着前端架构的复杂性不断增加，后端开发和前端开发的分工也越来越明显。传统的前后端分离架构，需要前端和后端同时开发和维护，并且还需要进行跨域请求和接口封装，难度较大。

为解决这一问题，有一种新的架构方式被广泛应用，这就是「BFF (Backend For Frontend)」模式，它借鉴了微服务架构中 API Gateway 的思想，将后端接口按照前端组件的需求进行封装，提供给前端开发人员直接调用，降低前后端协作的成本，提高开发效率。

在 BFF 架构中，最核心的部分就是 BFF 层。而在 Node.js 世界里，有个 npm 包叫做 bffs，它正是为 BFF 架构而生。在本文中，我们将着重介绍 bffs 包的使用方法。

BFFs 包简介

WalmartLabs 的开发团队在应对自己的 BFF 架构的挑战时，创作了 bffs 这个库。它主要功能是在 Node.js 中快速创建基于 JSON 格式的 RESTful API，并且能够根据需要在前端和后端之间调整层次结构。

bffs 主要特点包括：

支持全局插件并提供插件 API。
支持 before/after Middleware。
可以兼顾本地/非本地 API。
可以进行递归请求。
小巧高效。

如果想要详细了解 bffs 的使用方法，接下来的章节将会讲到。

BFFs 包的安装

在开始使用 bffs 的同时，你需要先安装 Node.js，并通过 npm 初始化你的项目。在终端中运行以下命令完成安装：

npm install bffs --save

这个命令使用了 npm 进行安装，并将 bffs 加入到你的项目依赖中。

BFFs 包的使用

在你的 Node.js 项目中引入 bffs 包，并使用它提供的 API，可以快速创建 RESTful API 并将其连接到你的应用程序。

-- -------------------- ---- -------
----- ---- - ----------------
----- --- - ------
    ----- -----------
---
-----------------------------
------------ -------- ----- ---- -- -
    --------------- --------
---
----------------

以上这段代码，创建了一个简单的示例，当你在浏览器中打开 http://localhost:3000/hello 时，可以看到返回的字符串 hello world。但是你应该意识到，这不是一个真正的 BFF API。接下来我们将详细介绍，如何让上述代码完成 BFF 的功能。

BFFs 包的实现

为了更好地理解 bffs 的工作原理，我们先来简单介绍下 BFF 架构本身。

BFF 是一种后端架构，它解决的是由于新的前端设置引起的原有接口无法支持的问题。具体而言，由于前端的不断迭代，可能会让已有的接口无法支持，比如一些需要调度的服务，接口形式会发生变化，如果只是通过前端调度的话，可能就需要重新编写代码。而 BFF 就是在下游服务之前建立一个业务层，专门面向前端业务进行数据调用，把接口的调用封装起来，实现弹性调度，从而避免由于接口变化带来的连锁变化调整。

BFF 的设计理念，就是要将后端接口按照前端组件的需求进行组合和封装，这样能够减少前端和后端的耦合度。可能你对这个解释有些困惑，所以我们现在来针对这个问题进行深度讲解。

BFF 的设计原则

在了解 BFF 的设计原则前，我们先明确一下需求点。

首先，我们要解决的是技术层面的问题。由于前端项目的快速发展，前端、后端的产品经理在获取业务后如果需要联系后端同学，其中需要沟通的问题可能涉及到：获取接口列表、参数说明、数据格式等等。如此复杂的拉取工作，对双方都是相当大的负担。

其次，这个问题将破坏团队的开发节奏和效率。在前端和后端团队中，需要通过跨域请求和接口封装调用外部接口服务，这会阻碍团队的合作和敏捷项目开发。

另外，前端团队还需要在接收到的数据中进行统计和过滤，以使它适合客户端的显示。

基于上述问题，我们可以得出一些 BFF 的设计原则：

根据前端的需要提供简单的 API 接口，避免前端和后端耦合。
BFF 层应该可配置、可扩展，以满足不同项目的需求。
BFF 负责调用微服务，有助于解锁前端团队所擅长的技能。
BFF 要具备下层调用链路的灵活性，从而可以快速变化，适应需求变化。

接下来，我们将着手介绍 BFFs 包，在不同情况下如何执行 BFF 架构。

BFFs 包的使用方法

第一步：创建出一个名为 myBFF_API 的变量：

const myBFF_API = bffs({
    name: 'myBFFsAPI'
});

第二步：使用 BFFs 内置插件

在创建 API 之前，你也许还需要先配置下 BFFs 的内置插件，插件有：用于解析请求体的插件，用于确定请求类型的插件等。你需要在你的代码库中先安装这些插件：

npm install body-parser express cors debug

之后在 BFFs 中引入他们：

app.use(bffs.plugins.bodyparser());
app.use(bffs.plugins.express());
app.use(bffs.plugins.cors());
app.use(bffs.plugins.debug());

尝试使用上述插件

第三步：创建 BFF 路由

-- -------------------- ---- -------
---------------
    ------- ------
    ----- -------------
    -------- ------------- ---- -
        ---------------
        ----- ---------- --------- - ----------
        --------------
        ------------ -- ---------- -
            ---------------------- ------ ---------- ---
            -------
        -
        ------
        ---------------------------- ------------------------
    -
---

将 token 返回给前端。注意，上面的代码仅表示我们只针对/login 的路径保持了一个 GET 路线。

第四步：启动 BFFs API 服务器

myBFF_API.start(3000);

使用上面的代码，你的服务器运行在你的项目在 3000 端口上。

例子说明

这样，我们就已经建立了一个简单 BFF API。它仅仅是作为一个代理响应了一个固定的请求和返回结果。

我希望，经过这篇教程，你对 BFFs 的使用和实现有了更好的了解，在你下一个三分之二的 Web 项目中，你会尽可能地使用它！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67713