我們可以使用如下命令列安裝 [SAP UI5 Tools](https://sap.github.io/ui5-tooling/)：

> npm install --global @ui5/cli

進入一個空的資料夾，執行命令列 `ui5 init` 報錯：

> Initialization not possible: Missing package.json file

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

然後用命令列 `npm init` 生成一個 `package.json`:

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

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

然後重新執行 `ui5 init`：

出現新的錯誤訊息：

> Could not detect project type: Could not find 'webapp' or 'src' / 'test' folders.
Applications should only have a 'webapp' folder.

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

那麼我就手動建立一個 `webapp` 資料夾。

之後 init 執行成功，自動建立了一個 `ui5.yaml` 檔案:

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

內容如下：
![](https://img-blog.csdnimg.cn/img_convert/487691d0b8579f5514589cf241087429.png)

按照我這篇文章 `使用 generator-easy-ui5 快速建立 SAP UI5 應用的工程結構` 介紹的工具，建立一個 SAP UI5 應用所需的基本檔案層級結構。

生成之後，檢視其 `package.json` 裡 script 區域定義的指令碼：

```json
"scripts": {
		"start": "fiori run --open 'index.html'",
		"start-local": "fiori run --config ./ui5-local.yaml --open 'index.html'",
		"start-noflp": "fiori run --open 'index.html'",
		"build": "ui5 build -a --clean-dest --include-task=generateManifestBundle generateCachebusterInfo",
		"deploy": "fiori verify",
		"deploy-config": "fiori add deploy-config",
		"unit-tests": "fiori run --open test/unit/unitTests.qunit.html",
		"int-tests": "fiori run --open test/integration/opaTests.qunit.html"
	},
```

指令碼里的 `fiori` 命令，即是本文標題提到的 `SAP UI5 Tools` 的命令提示行工具 `CLI`。

執行 `npm run start`，實際執行的命令是 `fiori run --open 'index.html'`：

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

最後執行時的效果：
![](https://img-blog.csdnimg.cn/img_convert/dad597992633bf621d89ade6a6f45202.png)

我們直接執行 `fiori deploy`，會報錯:

> 'fiori' is not recognized as an internal or external command,
operable program or batch file.

需要在 npm 這個 wrapper 裡執行：

`npm run deploy`:

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

錯誤訊息：

> No deployment configuration has been detected. Run `npm run deploy-config` to add configuration first.

意思是沒有檢測到 `deployment configuration`，需要先執行另一個命令：`npm run deploy-config`。

首先選擇 ABAP 環境：
![](https://img-blog.csdnimg.cn/img_convert/83796001f6a49787418f85d200bd2adc.png)

這個命令列 `npm run deploy-config` 底層執行的還是 `yo`：

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

`Target System URL`，先隨便維護一個，後續可以修改：

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

輸入部署到 ABAP 系統後生成的 bsp 應用名稱和儲存的 ABAP package 名稱，即可成功生成 `deployment configuration`：

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

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

SAP UI5 Tools 使用簡介

相關文章