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 里的 devDependenciesdependencies

"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: applicationui5Theme: sap_fiori_3server:  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的原创文章,尽在:"汪子熙":