自定義中介軟體擴充套件(`Custom Middleware Extension`)由 ui5.yaml 和自定義中介軟體實現組成。 它可以是一個獨立的模組，也可以是現有 UI5 專案的一部分。

下面是一個 `ui5.yaml` 的例子：

```yml
specVersion: "2.6"
kind: extension
type: server-middleware
metadata:
  name: markdownHandler
middleware:
  path: lib/middleware/markdownHandler.js
```

自定義中介軟體擴充套件可以是作為依賴項處理的獨立模組，透過在 package.json 裡定義依賴的方式引入。

或者，可以在 UI5 專案中實現自定義中介軟體擴充套件。 在這種情況下，擴充套件的配置是 ui5.yaml 中專案配置的一部分，如下所示。

UI5 Server 將檢測專案的自定義中介軟體配置，並在啟動時使用中介軟體。

看個具體的例子：

```yml
specVersion: '2.6'
kind: project
type: application
metadata:
  name: "sap.m.tutorial.walkthrough.140"
server:
  customMiddleware:
    - name: markdownHandler
      beforeMiddleware: serveResources
resources:
  configuration:
    paths:
      webapp: .
---
# Custom middleware extension as part of your project
specVersion: "2.6"
kind: extension
type: server-middleware
metadata:
  name: markdownHandler
middleware:
  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

![](https://img-blog.csdnimg.cn/img_convert/a2658b6230ce2096cb29a4396d8cf06f.png)

在 lib 資料夾下新建一個 `markdownHandler.js` 檔案之後：

![](https://img-blog.csdnimg.cn/img_convert/b72e5a1ea9b631648f9e1e967408f5b7.png)

舊的錯誤消失，又遇到了新的錯誤：

> 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:14
    at 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)

![](https://img-blog.csdnimg.cn/img_convert/c1ab4267478bcea7eb91ce954272ccde.png)

新增如下的實現之後：

```javascript
module.exports = function({resources, middlewareUtil, options}) {
    return function (req, res, next) {
        // [...]
        console.log('jerry');
    }
};
```
終於可以在 `ui5 serve` 執行的命令列視窗，看到自定義中介軟體擴充套件列印出的 jerry 了：
![](https://img-blog.csdnimg.cn/img_convert/31795093468fae3f975112fa78745b5e.png)

但是 localhost:8080 之後遇到如下錯誤：

`ERR_NETWORK_IO_SUSPENDED`
![](https://img-blog.csdnimg.cn/img_convert/dcc0f420897de54ee8ddd557861ed3f5.png)

# 解決方案

在自定義中介軟體實現裡，呼叫 next 函式即可：

![](https://img-blog.csdnimg.cn/img_convert/7369e5ca3d6e8cd7a3298a146ee91a53.png)

完整的原始碼：

```javascript
// Custom middleware implementation

module.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);
        });
    }
};
```

如何開發一個 SAP UI5 Tools 的自定義中介軟體擴充套件 - Custom Middleware Extension

相關文章