generator-easy-ui5 的 Github 倉庫地址：

https://github.com/SAP/generator-easy-ui5

該工具是為了簡化 SAP UI5 應用建立而設計的。

使用下面的命令列安裝這個工具：

> npm install -g yo generator-easy-ui5

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

安裝完畢後，執行命令列 yo：

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

如果看到上圖的輸出，說明 generator 安裝成功了。

選擇 Easy Ui5，回車。

報錯：unexpected token '.'

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

應該選擇 `@sap/fiori`, 然後顯示一個建立嚮導，逐一回復嚮導的問題，按`回車`鍵進入下一向導項。

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

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

自動生成的檔案列表如下：
![](https://img-blog.csdnimg.cn/img_convert/294861ede94f70cec51c65a31f037336.png)

確保最後看到 `Application generated successfully` 的訊息：

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

來看看 `generator-easy-ui5` 都幫助我們自動生成了哪些檔案。

package.json 裡的 `devDependencies` 和 `dependencies`：

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

```json
"devDependencies": {
		"@ui5/cli": "^2.11.1",
		"@ui5/fs": "^2.0.6",
		"@ui5/logger": "^2.0.1",
		"@sap/ux-ui5-tooling": "1",
		"rimraf": "3.0.2"
	},
	"ui5": {
		"dependencies": [
			"@sap/ux-ui5-tooling"
		]
	}
```

script 區域有很多 `fiori` 命令列，來自 `@sap/ux-ui5-tooling`：

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

指令碼 start 和 start-local 的區別，就在於使用 `ui5.yaml` 還是 `ui5-local.yaml`:

```json
"start": "fiori run --open 'index.html'",
"start-local": "fiori run --config ./ui5-local.yaml --open 'index.html'",
```
執行 `npm run start`:

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

成功開啟 SAP UI5 頁面：
![](https://img-blog.csdnimg.cn/img_convert/56831aae036a72fe943142b17afa0539.png)

開啟 `ui5.yaml` 檔案，檢視代理伺服器配置：

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

```yaml
specVersion: '1.0'
metadata:
  name: 'project1'
type: application
ui5Theme: sap_fiori_3
server:
  customMiddleware:
  - name: fiori-tools-proxy
    afterMiddleware: compression
    configuration:
      ignoreCertError: false # If set to true, certificate errors will be ignored. E.g. self-signed certificates will be accepted
      backend:
      - path: /sap/opu/odata
        url: http://localhost
      ui5:
        path: 
        - /resources
        - /test-resources
        url: https://ui5.sap.com
        version:  # The UI5 version, for instance, 1.78.1. Empty means latest version
  - name: fiori-tools-appreload
    afterMiddleware: compression
    configuration:
     port: 35729
     path: webapp

```

這個高亮區域的含義是，如果 SAP UI5 發起請求的 url 裡包含了 `/resources` 或者 `/test-resources`, 那麼 domain 自動被替換為 `https://ui5.sap.com`.

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

如果我們把 ui5.sap.com 改成 ui5.sap1.com, 就會看到期望中的 `getaddrinfo ENOTFOUND ui5.sap1.com` 錯誤：

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

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

當然，我們直接在 Chrome 開發者工具 network 標籤頁裡是看不到請求是來自 `https://ui5.sap.com` 的：
![](https://img-blog.csdnimg.cn/img_convert/427591cf987e74cf3a65bf645bcb2390.png)

https://ui5.sap.com/resources/sap-ui-core.js

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

有了這個 proxy 伺服器之後，我們在 `index.html` 裡不必引入 CDN 的 SAP UI5 庫，直接使用相對路徑 `resources/sap-ui-core.js` 即可:

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

使用 generator-easy-ui5 快速建立 SAP UI5 應用的工程結構

相關文章