使用 generator-easy-ui5 快速创建 SAP UI5 应用的工程结构
generator-easy-ui5 的 Github 仓库地址:
https://github.com/SAP/generator-easy-ui5
该工具是为了简化 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-proxyafterMiddleware: compressionconfiguration:ignoreCertError: false # If set to true, certificate errors will be ignored. E.g. self-signed certificates will be acceptedbackend:- path: /sap/opu/odataurl: http://localhostui5:path: - /resources- /test-resourcesurl: https://ui5.sap.comversion: # The UI5 version, for instance, 1.78.1. Empty means latest version- name: fiori-tools-appreloadafterMiddleware: compressionconfiguration:port: 35729path: 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/sap-ui-core.js
有了这个 proxy 服务器之后,我们在 index.html
里不必引入 CDN 的 SAP UI5 库,直接使用相对路径 resources/sap-ui-core.js
即可:
更多Jerry的原创文章,尽在:“汪子熙”:
使用 generator-easy-ui5 快速创建 SAP UI5 应用的工程结构相关推荐
- 使用 yo 命令行向导创建 SAP UI5 应用
命令行:yo easy-ui5 project, 遇到错误消息: you don't seem to have a generator with the name "easy-ui5&quo ...
- 使用SAP Cloud Platform fullstack WebIDE创建SAP UI5应用并部署
登录SAP云平台,在Services面板里找到SAP WebIDE Full-stack服务: 从availability里发现WebIDE full-stack目前只有Neo能用,CloudFoun ...
- 使用在线编辑器创建 SAP UI5 项目并运行
在按照本文动手尝试之前,请先阅读这篇文章学习 glitch 最基础的用法:web 应用在线编辑器 glitch 简介. 新建一个类型为 glitch-hello-website 应用: 此时会生成如下 ...
- SAP UI5 Tools 运行了 fiori add deploy-config 命令之后,工程文件发生了哪些变化
我使用这篇文章 使用 generator-easy-ui5 快速创建 SAP UI5 应用的工程结构 介绍的工具,创建了一个 SAP UI5 应用,然后运行了 SAP UI5 Tools 提供的命令 ...
- SAP UI5 Tools 使用简介
我们可以使用如下命令行安装 SAP UI5 Tools: npm install --global @ui5/cli 进入一个空的文件夹,执行命令行 ui5 init 报错: Initializati ...
- 使用 Busy Dialog 动画阻止 SAP UI5 应用按钮短时间内快速被点击试读版
一套适合 SAP UI5 初学者循序渐进的学习教程 作者简介 Jerry Wang,2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今.Jerry 是 SAP 社区导师,S ...
- SAP UI5 应用开发教程之五十八 - 使用工厂方法在运行时动态创建不同类型的列表行项目控件试读版
一套适合 SAP UI5 初学者循序渐进的学习教程 教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
- SAP UI5 应用开发教程之三十二 - 如何创建一个自定义 SAP UI5 控件试读版
一套适合 SAP UI5 初学者循序渐进的学习教程 教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
- SAP UI5 初学者教程之九 - 创建第一个 Component 的试读版
一套适合 SAP UI5 初学者循序渐进的学习教程 教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 初学者教程之一:Hello World SAP UI5 初学者教程之二:SAP UI5 ...
最新文章
- 如何将json格式的string字符串转换为string数组
- Docker学习笔记之在开发环境中使用服务发现
- Socket编程原理概述
- Android-NDK:native-media
- vue 路由跳转并打开新页面
- 漫画版:如何学习单片机?
- C# - Span 全面介绍:探索 .NET 新增的重要组成部分
- jquery复选框 选中事件 及其判断是否被选中_常用笔记
- 2Sigma OA prepare: Longest Chain
- Python + Appium 环境搭建
- 2015 HIAST Collegiate Programming Contest C
- 跟我学Kafka之zookeeper的存储结构
- transform-style: preserve-3d「In CSS」
- 2023年前实现大型工业企业5G应用渗透率超35%!模组企业如何保驾护航?
- 利用turtle模块画一棵树,包括枝干和树叶,并涂上颜色
- 网络连接不正常是什么原因
- 2023年美业市场五大消费趋势
- 考研英语 - word-list-22
- oracle解锁账户以及修改密码
- 电磁兼容入门篇之辐射发射(辐射骚扰)试验
热门文章
- win下 cmd 查询本机开了哪些端口 并查看开启端口的软件
- Android Unable to resolve target 'android-8'
- (十四)java版spring cloud+spring boot 社交电子商务平台-使用spring cloud Bus刷新配置...
- Java 比特币开发系列教程汇总
- 河北经济发展进入新阶段:服务业成主导产业
- Java基础知识(二)之控制语句
- Atitit 理解Monad attilax总结
- BZOJ4388 : JOI2012 invitation
- IOS开发基础知识--碎片8
- fckeditor编辑器自定义加按钮菜单