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

注销發表於2022-02-20
UI

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

https://github.com/SAP/genera...

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

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

npm install -g yo generator-easy-ui5

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

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

選擇 Easy Ui5，回車。

報錯：unexpected token '.'

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

自動生成的檔案列表如下：

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

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

package.json 裡的 devDependencies 和 dependencies：

"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：

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

"start": "fiori run --open 'index.html'",
"start-local": "fiori run --config ./ui5-local.yaml --open 'index.html'",

執行 npm run start:

成功開啟 SAP UI5 頁面：

開啟 ui5.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.

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

當然，我們直接在 Chrome 開發者工具 network 標籤頁裡是看不到請求是來自 https://ui5.sap.com 的：

https://ui5.sap.com/resources...

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

更多Jerry的原創文章，盡在："汪子熙":

相關文章