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)

ITPub博客

使用 generator-easy-ui5 快速创建 SAP UI5 应用的工程结构

最新文章