技术文章
我在UI5–安装项目中使用TypeScript的第一次经验
大约在4月份,SAP首次宣布了对UI5的TypeScript支持。从那时起,我尝试在每一个新的UI5项目中尽可能地使用它。现在是时候在这个博客文章系列中分享我在UI5中使用TypeScript的经验了。
在我的第一篇博文中,我首先介绍了什么是TypeScript、如何开始以及我面临的挑战://www.hncdgy.com/2021/11/19/my-first-experience-with-typescript-in-ui5-introduction/
在这篇博文中,我将分享我是如何开始我的演示项目的,我将在这篇博文系列中作为一个例子。我将生成一个TypeScript UI5项目,添加Fiori工具,并将其连接到northwind服务作为演示用途。
您可以观看此视频或继续阅读以下步骤:
生成项目
为了生成项目,我使用easy UI5 yeoman生成器。可以使用以下命令安装此命令:
npm安装-g yo发电机-easy-ui5
安装此发电机后,您可以键入“yo”以获取所有已安装发电机的列表:
当您选择“Easy UI5”时,它将提供UI5生成器的列表:
“generator-ui5-ts-app”是类型脚本生成器。
填写所有问题,UI5中的第一个打字脚本将为您生成
得益于简易UI5生成器,您可以在UI5中立即启动并运行TypeScript。多亏了马吕斯·奥伯特!
与“普通”UI5项目相比,生成器附带了额外的配置,以支持TypeScript。您会注意到的一点是,它附带了更多用于构建和启动应用程序的脚本。
构建脚本仍将构建完整的应用程序,但将首先将TypeScript编译为JavaScript并将其放入webapp文件夹中。如果没有,它将创建一个webapp文件夹。之后,它将像我们习惯的那样在webapp文件夹上运行UI5 build命令。除此之外,生成器还为自包含的构建提供脚本。因此,我们现在有5个构建脚本
与启动脚本类似,要在本地运行,必须将TypeScript代码编译为webapp文件夹中的JavaScript。正在本地提供服务的是webapp文件夹。“watch:ts”脚本确保我们总能在浏览器中看到TypeScript的最新更改。简单的刷新无法完成这项工作,每次更改TypeScript中的代码时,都需要将其编译为JavaScript。“start:ui5”将用于webapp文件夹,其中包含已编译的JavaScript代码。
运行“npm start”将并行启动两个脚本。
该项目还附带了一些附加功能。这是因为build:ts和watch:ts使用babel将TypeScript编译为JavaScript。它需要babel cli、core和带有预设类型脚本的预设环境。预设也用于巴别塔配置:
其次,它需要ui5类型在IDE中为您提供自动完成功能:“@openui5/ts types esm”,在tsconfig.json中配置:
依赖性:
添加fiori工具
我还将fiori工具添加到我的项目中,以配置我的后端服务。还有其他UI5工具扩展也可用于此,您可以在此处找到完整列表:https://ui5-community.github.io/ui5-ecosystem-showcase/
为什么我在这种情况下使用Fiori工具?它完成了任务并提供SAP支持
安装Fiori工具作为一种设备:
sap/ux-ui5-D下的npm i
将Fiori工具作为UI5依赖项注册到UI5工具:
配置北风服务
使用ui5.yaml文件中的fiori工具将代理配置添加到“services.odata.org”:
服务器:customMiddleware:-名称:fiori tools proxy afterMiddleware:压缩配置:ignoreCertError:false#如果设置为true,将忽略证书错误。例如,将接受自签名证书后端:-路径:/v2 url:https://services.odata.org/
将northwind V2 OData服务的路径作为manifest.json中的数据源添加:
“数据源”:{“Northwind.svc”:{“uri”:“/V2/(S(mo4mpsdbi0fygmzhfv5ik5gf))/OData/OData.svc/”,“类型”:“OData”,“设置”:{“odataVersion”:“2.0”,“localUri”:“localService/metadata.xml”}
使用manifest.json中的Northwind数据源定义主模型:
“”:{“数据源”:“Northwind.svc”,“类型”:“sap.ui.model.odata.v2.ODataModel”,“设置”:{“defaultOperationMode”:“服务器”,“defaultBindingMode”:“双向”,“defaultCountMode”:“无”},“预加载”:false}
UI5项目已经为下一步使用TypeScript开发UI5做好了准备!
通过运行npm start,您已经可以看到它的外观
非常好的阅读,非常感谢!
棒极了!
谢谢你为TS应用程序提供的积分,但实际上他们都去了彼得·穆西.