UI5 Tooling

已于 2023-03-02 10:28:07 修改
阅读量500 收藏 4
点赞数 1
分类专栏： SAPUI5 文章标签： 前端 javascript java
于 2022-06-28 22:26:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiayutian_c/article/details/125450662
版权

在这里插入图片描述

UI5 Tooling

UI5 Tooling是一个基于Node.js开发的开源项目。它提供了一个模块化的、可配置的和可扩展的命令行接口，为应用程序、库和重用组件的高效开发定制了UI5框架。

动机

在这里插入图片描述
开源工具重用，灵活扩展，宜集成，先进语言特性，多IDE适用。总之，好用高效。
在这里插入图片描述
从架构去了解UI5 Tooling，我的理解是首先它是一组命令行工具，基于NodeJS集成了File System,Project,Logger,Server,Builder这几个模块，不但可以本地执行，还可以用于SAP webIDE以及SAP Business Application Studio，应用的执行可以通过Web浏览器来进行操作。

在这里插入图片描述
四种类型的Project:

  • Application：
  • Library:
  • Theme-library:
  • Module:

前提和安装

在这里插入图片描述
Node 10以上 + NPM（或者其它依赖 package.json 的package管理器，比如YAML），安装也很简单。
Nodejs官网下载安装，然后执行下面命令既可

npm install --global @ui5/cli

官方文档

安装完成后可以执行ui5 -v来查看是否安装成功以及看一下版本

在这里插入图片描述

启动

以一个简单的例子来说明UI5 Tooling的使用过程。假如我们现在写了一个index.html,并且有相应的js文件和view文件，放在了一个04_copy目录下。
index.html:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>title of 04 copy</title>
    <script 
        id="sap-ui-bootstrap" 
        src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" 
        data-sap-ui-theme="sap_fiori_3"
        data-sap-ui-libs="sap.m" 
        data-sap-ui-compatVersion="edge" 
        data-sap-ui-async="true" 
        data-sap-ui-oninit="module:sap/ui/demo/walkthrough/index"
        data-sap-ui-resourceroots='{
			"sap.ui.demo.walkthrough": "./"
		}'
        
        >
    </script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>

index.js

sap.ui.define([
	"sap/ui/core/mvc/XMLView"
], function (XMLView) {
	"use strict";

	XMLView.create({
		viewName: "sap.ui.demo.walkthrough.view.App"
	}).then(function (oView) {
		oView.placeAt("content");
	});
});

App.view.xml

<mvc:View
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <Text text="Hello World"/>
</mvc:View>

此时如果直接执行index.html肯定是失败的，F12看报错价位非常看到一个报的是CORS， 一个报的是找不到对应的xml文件，还有Failed to load resource 等等。

解决方案就是我们需要将应用部署到Web server中，UI5 Tooling就是为它而生的。

  1. 首先要有一个package.json文件,package.json如果没有的话可以自己创建，也可以使用
npm init --yes

自动创建。
其中只有name属性是必需的。
在这里插入图片描述
自动创建的内容：
在这里插入图片描述

  1. 另外程序的文件结构要注意，如果是类型是application一定要有一个webapp文件夹，如果是Libraries一定要有src文件夹
    否则在init会报错：

在这里插入图片描述
我做这个例子是应用类型，所以正确的结构应该是：
./webapp
./package.json
paackage.json和webapp文件夹同级，webapp中放应用的相关文件
在这里插入图片描述

  1. 这时执行ui5 init会自动生成一个ui5.yaml文件，这个是UI5 Tooling在这个应用中的配置文件，具体参考：
    在这里插入图片描述

执行后的结构：
./ webapp
./ package.json
./ ui5.yaml
在这里插入图片描述
这里metadata中的name属性就是从package.json文件中derive过来的。

此时，如果我们执行ui5 serve命令的话仍然会报错，缺少manifest.json文件
在这里插入图片描述

  1. 创建一个manifest.json文件。manifest.json描述符为存储与应用程序、应用程序组件或库关联的元数据提供了一个中央的、机器可读的、易于访问的位置。可以理解成一个地图，它包含应用程序ID、版本、使用的数据源以及所需的组件和库，告诉服务器怎么读当然的程序。
    我们什么都不写，只写必要项sap.app/id

在这里插入图片描述

  1. 此时再执行ui5 serve即可以启动server，但还是不能正常打开页面，提示找不到sap.ui.core.js
  2. 加入依赖项，需要用到两条命令：一个是向SAPUI5添加一个框架依赖，一个是include需要的libraries。
ui5 use sapui5@latest

ui5 add sap.ui.core sap.m sap.ui.table themelib_sap_fiori_3

在这里插入图片描述
成功后再看yaml文件会发现多了内容：
在这里插入图片描述
7. 执行ui5 serve启动开发服务器
在这里插入图片描述
打开浏览器查看
在这里插入图片描述
这时再打开index.html是可以正常显示的，我们也可以直接将index.html放布出去，这样就不会再打开文件路径，而是直接打开index.html
在这里插入图片描述

在这里插入图片描述

Build编译

使用ui5 build命令进行编译，它是task centric的一组功能，有下面几种编译模式：
在这里插入图片描述
不同的参数会执行不同的task组合，比如默认的是preload形式：会执行下面8个大的task
在这里插入图片描述
编译后的文件中会包含一个Component-preload.js
在这里插入图片描述
对比下几种模式的区别。
为了能对比出效果，首先将sapui5的runtime下载下来，因为之前用的src是“https://sapui5.hana.ondemand.com/resources/sap-ui-core.js”
在这里插入图片描述
如下图resouces文件夹就是从runtime文件中解压出来的文件夹，为了搞清楚src路径的设置特意把runtime解压到了上级目录，resources和workthrough是同级的，workthrough下还有04_copy文件夹，然后才是webapp，index.html在webapp文件夹内
在这里插入图片描述
所以src的路径要设置为"../../../resources/sap-ui-core.js" ，这里是一个相对路径，相对谁呢，相对于index.html文件，它上级(webapp)的上级(04_copy)的上级(workthrough)这里才能找到resources文件夹，每一个上级就用../来表示，这里很重要。
在这里插入图片描述
然后再看 ui5 build和ui5 build --all能及ui5 build self-contained的区别。

  1. 首先用默认的 ui5 build
    在这里插入图片描述

执行serve dist查看结果
在这里插入图片描述
这时文件加载是会报错
在这里插入图片描述
也就是sap.ui.core.js是没有被编译进去的。

  1. 如果是用 ui5 build --all
    在这里插入图片描述
    在这里插入图片描述

在这里插入图片描述
这时所需的js文件因为已经编译在其中，所以可以正常显示。

  1. 再看另一种模式，ui5 build self-contained
    在这里插入图片描述

这种模式会将当前缺少的module以错误的形式暴露出来。

xiayutian_c
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ui5-tooling：一个开放的模块化工具链，用于基于UI5框架开发最先进的应用程序
01-30
UI5工具 一个开放的模块化工具链，用于基于框架开发最新的应用程序。 资源资源 :clapper_board: :clapper_board: 模组 UI5工具包含多个模块。 每个数据库都在单独的存储库中进行管理： ：UI5命令行界面，利用以下所有模块 ：用于构建UI5项目的依赖关系树（包括配置）的模块 ：用于运行UI5开发服务器的模块 ：用于构建UI5项目的模块 ：UI5特定的文件系统抽象 ：内部日志记录模块 使用概述（箭头表示依赖关系） 贡献 请查看我们的。 支持 请按照我们的来报告问题。 或在的频道中与我们聊天。 对于公共问答，请使用的。
ui5tooling:在ui5工具中重现错误
04-07
ui5tooling 在ui5构建工具中重现错误 git clone cd ui5tooling npm安装@ ui5 / cli ui5 build->没有错误。 没有警告。 npm i -g eslint eslint ./dist/Component-preload.js->解析错误：标识符'r'已经被声明
UI5：面向企业级应用的JavaScript框架
你若盛开，清风自来
04-22 1204
本文将介绍UI5框架的特点和优势，以及它在企业级应用开发中的应用。UI5是一个面向企业级应用的JavaScript框架，具有丰富的UI组件、强大的功能、良好的性能和灵活的布局。了解UI5的特点和优势对于开发者来说具有重要意义。掌握UI5的使用可以帮助我们更高效地构建企业级应用。
**探索UIVeri5：为UI5应用打造的终极测试解决方案**
最新发布
gitblog_00030的博客
06-23 309
探索UIVeri5：为UI5应用打造的终极测试解决方案 项目地址:https://gitcode.com/SAP/ui5-uiveri5 在软件开发领域，确保应用的功能性和用户体验至关重要。特别是在处理复杂的UI5应用时，一个强大而灵活的端到端（E2E）测试框架必不可少。本文将带您深入了解UIVeri5——一款专为基于UI5的应用设计的测试框架，它不仅简化了测试流程，而且极大地提高了测试的可靠性和...
SAPUI5-开发环境配置-UI5 Tooling介绍
总钻风来巡山
12-22 601
SAPUI5 UI5 Tooling
探索 SAP UI5 Tooling：构建现代Web应用的新锐利器
gitblog_00042的博客
04-18 280
探索 SAP UI5 Tooling：构建现代Web应用的新锐利器 ui5-toolingAn open and modular toolchain to develop state of the art applications based on the UI5 framework项目地址:https://gitcode.com/gh_mirrors/ui/ui5-tooling 如果你是UI...
ui5
weixin_42584507的博客
01-10 218
UI5是SAP研发的一种Web前端开发框架，用于开发基于浏览器的应用程序。它基于HTML5，并提供了大量的UI组件和库，帮助开发人员更快地构建应用程序。UI5也提供了MVC模型，帮助开发人员更好地组织和管理应用程序的代码。 ...
ui5con20-ui5-tooling
05-24
ui5con20-ui5-工具 该存储库包含UI5con ON AIR 2020会话UI5 Tooling 2020的内容。 如何使用UI5 Tooling Node.js API创建组件预加载的示例。 Monorepo设置包含应用程序，库，主题库和服务器。
sapui5-runtime
03-27
7. **工具链**：SAP提供了一整套开发工具，如SAP Web IDE、SAP UI5 Tooling等，支持编码、调试、测试和部署，加速开发流程。 在提供的文件列表中，`index.html`通常是应用程序的入口点，它加载SAP UI5库和其他资源...
ui5-boilerplate:具有UI5工具的UI5项目样板
04-30
它利用了UI5工具（ui5-tooling），这是一个强大的开发工具集，能够简化UI5应用的开发、构建和调试过程。这个模板为开发者提供了一个基础结构，可以在此基础上添加自己的业务逻辑和界面元素，从而高效地开始UI5应用的...
trippinrw-openui:使用 sapui5 尝试 odata 服务的第一个演示
07-06
这通常涉及到使用 IDE 的扩展或插件来支持 SAPUI5 的开发，如 SAP UI5 Tooling 或者 SAP Web IDE。"第一个演示" 暗示了一个逐步学习的过程，旨在让开发者了解基本的步骤和概念。 【标签】 "JavaScript" 标签表明了 ...
SAP UI5 文档
03-13
SAP UI5 文档SAP UI5 文档SAP UI5 文档SAP UI5 文档SAP UI5 文档
SAP UI5
tiokld的专栏
07-17 2705
网上很少能看到介绍OpenUI5的中文文章，有也是“ SAP 开源的 JavaScript 框架，有点重”。首先我不去说OpenUi5到底有多重，先说说SAP为什么把OpenUI5开源，除了软件license法律上的原因之外。 先说说历史，SAP在UI框架上的选择其实也纠结了十多年了，是多年前，SAP就很有先见的推出了SAP GUI，这个其实就是最早的BS框架，不过这个B是SAP自己的客户端而不
UI5（一）
修电脑的猫的博客
12-23 642
UI5
SAP ui5
tiokld的专栏
12-03 2517
实习了一段时间，接触两个项目，都用到SAP UI5，谈一点看法。UI5更像是对jquery的一种封装，类库总大小差不多58M左右。所有用到的一些控件都是通过js来定义实现的，它将前端view层又采用MVC的模式进行分层，页面分为demo.view.js以及demo.controller.js，demo.view.js文件里面可以定义一些sap.ui5的一些控件，一些click事件或者对数据进行操作
对ui5的一些总结和思考
匹夫的博客
09-21 621
在帮助同事解决了函数作用域的问题之后，突然觉得有必要梳理一下ui5的知识。 ui5的逻辑控制器采用了amd规范，可以实现异步加载。关于amd规范可以参考： http://www.jianshu.com/p/9b44a1fa8a96and规范制定了一种匿名定义模块的方式： 如果在使用define（）的时候省略了第一个参数，即省略了模块的名字，这个时候模块的名字会被默认为当前模块的文件名，那么字加
UI5:安装UI5开发环境
weixin_43734184的博客
04-11 1420
1.首先要安装nodejs和vscode(建议采用vscode开发），然后才能执行下面的操作 nodejs:https://nodejs.org/en/ vscode:https://code.visualstudio.com/ 2.vscode中安装ui5 执行命令： npm install --global @ui5/cli 3.桌面创建文件夹app1,vscode打开该文件夹，执行init npm init --yes 4.在app1中创建webapp文件夹 5.在app1文件夹里执行，生成ui5
UI5 快速入门教程
weixin_65180200的博客
04-18 801
UI5 快速入门 帮你分析了解 每一个文件的每一个细节
探索与学习：UI5教程 - 一个完善的Web应用开发平台
gitblog_00083的博客
04-21 329
探索与学习：UI5教程 - 一个完善的Web应用开发平台 项目地址:https://gitcode.com/wangzixi-diablo/ui5-tutorial 项目简介 UI5 Tutorial 是一个基于SAP UI5的在线教程，由wangzixi-diablo维护。该项目旨在帮助开发者和学生快速入门并精通SAP UI5，这是一款强大的前端框架，用于构建企业级的交互式Web应用程序。通过此...
ENOENT: no such file or directory, open 'ux-ui5-tooling@1.10.2怎样解决
07-14
ENOENT: no such file or directory, open 'ux-ui5-tooling@1.10.2' is an error message indicating that the file or directory you are trying to access does not exist. To resolve this issue, you can try ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值