自定义中间件扩大(Custom Middleware Extension)由 ui5.yaml 和自定义中间件实现组成。 它能够是一个独立的模块,也能够是现有 UI5 我的项目的一部分。

上面是一个 ui5.yaml 的例子:

specVersion: "2.6"kind: extensiontype: server-middlewaremetadata:  name: markdownHandlermiddleware:  path: lib/middleware/markdownHandler.js

自定义中间件扩大能够是作为依赖项解决的独立模块,通过在 package.json 里定义依赖的形式引入。

或者,能够在 UI5 我的项目中实现自定义中间件扩大。 在这种状况下,扩大的配置是 ui5.yaml 中我的项目配置的一部分,如下所示。

UI5 Server 将检测我的项目的自定义中间件配置,并在启动时应用中间件。

看个具体的例子:

specVersion: '2.6'kind: projecttype: applicationmetadata:  name: "sap.m.tutorial.walkthrough.140"server:  customMiddleware:    - name: markdownHandler      beforeMiddleware: serveResourcesresources:  configuration:    paths:      webapp: .---# Custom middleware extension as part of your projectspecVersion: "2.6"kind: extensiontype: server-middlewaremetadata:  name: markdownHandlermiddleware:  path: lib/markdownHandler.js

下面的例子启动后,遇到如下谬误音讯:

Error Message:
middlewareRepository: Failed to require middleware module for markdownHandler: Cannot find module 'C:\Code\UI5\Walkthrough\140\lib\middleware\markdownHandler.js'
Require stack:
  • C:\Code\UI5\Walkthrough\140\node_modules\@ui5\cli\node_modules\@ui5\server\lib\middleware\middlewareRepository.js
  • C:\Code\UI5\Walkthrough\140\node_modules\@ui5\cli\node_modules\@ui5\server\lib\middleware\MiddlewareManager.js
  • C:\Code\UI5\Walkthrough\140\node_modules\@ui5\cli\node_modules\@ui5\server\lib\server.js
  • C:\Code\UI5\Walkthrough\140\node_modules\@ui5\cli\node_modules\@ui5\server\index.js
  • C:\Code\UI5\Walkthrough\140\node_modules\@ui5\cli\lib\cli\commands\serve.js
  • C:\Code\UI5\Walkthrough\140\node_modules\@ui5\cli\node_modules\yargs\index.cjs
  • C:\Code\UI5\Walkthrough\140\node_modules\@ui5\cli\bin\ui5.js
  • C:\app\node-v14.15.0-win-x64\node_modules\@ui5\cli\node_modules\import-local\index.js
  • C:\app\node-v14.15.0-win-x64\node_modules\@ui5\cli\bin\ui5.js

在 lib 文件夹下新建一个 markdownHandler.js 文件之后:

旧的谬误隐没,又遇到了新的谬误:

TypeError: middleware is not a function
at C:\Code\UI5\Walkthrough\140\node_modules\@ui5\cli\node_modules\@ui5\server\lib\middleware\MiddlewareManager.js:253:14at MiddlewareManager.addMiddleware (C:\Code\UI5\Walkthrough\140\node_modules\@ui5\cli\node_modules\@ui5\server\lib\middleware\MiddlewareManager.js:89:38)at MiddlewareManager.addCustomMiddleware (C:\Code\UI5\Walkthrough\140\node_modules\@ui5\cli\node_modules\@ui5\server\lib\middleware\MiddlewareManager.js:237:15)at MiddlewareManager.applyMiddleware (C:\Code\UI5\Walkthrough\140\node_modules\@ui5\cli\node_modules\@ui5\server\lib\middleware\MiddlewareManager.js:38:14)at async Object.serve (C:\Code\UI5\Walkthrough\140\node_modules\@ui5\cli\node_modules\@ui5\server\lib\server.js:166:3)at async Object.serve.handler (C:\Code\UI5\Walkthrough\140\node_modules\@ui5\cli\lib\cli\commands\serve.js:130:33)

增加如下的实现之后:

module.exports = function({resources, middlewareUtil, options}) {    return function (req, res, next) {        // [...]        console.log('jerry');    }};

终于能够在 ui5 serve 执行的命令行窗口,看到自定义中间件扩大打印出的 jerry 了:

然而 localhost:8080 之后遇到如下谬误:

ERR_NETWORK_IO_SUSPENDED

解决方案

在自定义中间件实现里,调用 next 函数即可:

残缺的源代码:

// Custom middleware implementationmodule.exports = function({resources, middlewareUtil, options}) {    const MarkdownIt = require('markdown-it');    const md = new MarkdownIt();    return function (req, res, next) {        if (!req.path.endsWith(".html")) {            // Do not handle non-HTML requests            next();            return;        }        // Try to read a corresponding markdown file        resources.rootProject.byPath(req.path.replace(".html", ".md")).then(async (resource) => {            if (!resource) {                // No file found, hand over to next middleware                next();                return;            }            const markdown = await resource.getBuffer();            // Generate HTML from markdown string            const html = md.render(markdown.toString());            res.type('.html');            res.end(html);        }).catch((err) => {            next(err);        });    }};