SAP UI5 + Yarn = 不运行

     2023-02-16     61

关键词:

【中文标题】SAP UI5 + Yarn = 不运行【英文标题】:SAP UI5 + Yarn = does not run 【发布时间】:2020-02-21 08:15:27 【问题描述】:

信息:NPM 也有同样的问题

我想创建一个 UI5 项目,但 UI5 应该使用 NPM 或 Yarn 导入。我从演练第 12 步下载了示例:https://sapui5.hana.ondemand.com/#/topic/4df1d914e52d4b1aa0805eb01522537e ... 并安装了 Yarn。文件 package.json 已经存在于演示中,命令“yarn install”(以及“npm install”)将所有内容下载到 node_modules 中。然后我像这样更改了 index.html 中的 src 属性:

src="../node_modules/@openui5/sap.ui.core/src/sap-ui-core.js"

但是当我运行 index.html 时,它什么也没做。例如显示此错误:

Failed to load component for container container. Reason: Error: failed to load 'sap/m/library.js' from ../node_modules/@openui5/sap.ui.core/src/sap/m/library.js: script load error.

...文件夹“m”不存在...

还在不存在的文件夹中搜索 library.js:node_modules/@openui5/sap.ui.core/src/sap/ui/core/themes/sap_belize/library.css ...文件夹 sap_belize 丢失。

当我使用默认 UI5-src 时,一切正常:

src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"

很多人提到ui5-src应该是这样的:

src="resources/sap-ui-core.js"

...但是这样的文件夹不存在,所以它不能工作。

我有什么遗漏吗?我原以为这会立即奏效,但我现在已经花了 4 个小时......谢谢。

编辑: 当我从https://openui5.org/releases/ 下载整个 UI5 时,一切正常 ...但是 NPM 和 Yarn 有不同的文件夹结构,所以我添加了以下 data-sap-ui-resourceroots,现在看来 UI5 以某种方式工作,但仍然缺少主题...

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SAPUI5 Walkthrough</title>
    <script
        id="sap-ui-bootstrap"
        src="../node_modules/@openui5/sap.ui.core/src/sap-ui-core.js"
        data-sap-ui-theme="sap_belize"
        data-sap-ui-resourceroots='
            "sap.ui.demo.walkthrough": "./",
            "sap.m": "../node_modules/@openui5/sap.m/src/sap/m",
            "sap.base": "../node_modules/@openui5/sap.ui.core/src/sap/base",
            "sap.ui": "../node_modules/@openui5/sap.ui.core/src/sap/ui",
            "sap.ui.layout": "../node_modules/@openui5/sap.ui.layout/src/sap/ui/layout",
            "sap.ui.unified": "../node_modules/@openui5/sap.ui.unified/src/sap/ui/unified",
            "sap.m.themes": "../node_modules/@openui5/themelib_sap_belize/src/sap/m/themes"

        '
            data-sap-ui-theme-roots='
              "sap_belize": "../node_modules/@openui5/themelib_sap_belize/src/"
            '
        data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
        data-sap-ui-compatVersion="edge"
        data-sap-ui-async="true">
    </script>
</head>
<body class="sapUiBody" id="content">
    <div data-sap-ui-component data-name="sap.ui.demo.walkthrough" data-id="container" data-settings='"id" : "walkthrough"'></div>
</body>
</html>

我当前的错误说需要一些不存在的文件:

Could not load theme parameters from: 
file:///C:/_my/sap.m.tutorial.walkthrough.12/node_modules/@openui5/themelib_sap_b>elize/src/sap/ui/core/themes/sap_belize/library-parameters.json
- NetworkError: Failed to execute 'send' on 'XMLHttpRequest':
Failed to load 
'file:///C:/_my/sap.m.tutorial.walkthrough.12/node_modules/@openui5/themelib_sap_belize/src/sap/ui/core/themes/sap_belize/library-parameters.json'.

【问题讨论】:

【参考方案1】:

UI5 文档已经回答了您的问题,请参阅App Development Using OpenUI5,“使用 OpenUI5 进行应用开发”部分。

基本上,所有 UI5 示例和教程都假设有一个支持 UI5 的中间件 * 将所有 UI5 库映射到一个层次结构中 * 使用名为resources/ 的虚拟路径将该层次结构的根映射到应用程序的根。

ui5-tooling 是开源的,提供了这样一个开箱即用的中间件。 SAP 提供 UI5 支持的专有服务器(例如 NetWeaver ABAP、NetWeaver Java 等)包括类似的中间件。

如果您不想使用这样的中间件,则需要额外的配置(就像您对资源根和主题根所做的那样),或者您需要将所有文件一起复制到适合您需要的结构中。

推荐的方法是上面概述的方法。

【讨论】:

【参考方案2】:

获取官方示例应用程序。 https://github.com/SAP/openui5-masterdetail-app

对于您的问题,您似乎混合了本地和服务器文件系统。 ui5 serve 没有暴露 Node_modules。显然你不能对你的文件系统进行 XMLHttpRequest 调用。

src="resources/sap-ui-core.js" 由服务器虚拟创建/映射。

【讨论】:

如何在 SAP UI5 代码中生成 UUID? [复制]

】如何在SAPUI5代码中生成UUID?[复制]【英文标题】:HowdoIgenerateaUUIDinSAPUI5code?[duplicate]【发布时间】:2020-09-2310:04:25【问题描述】:我知道如何在node.js中使用npm管理的库(如uuid)来做到这一点。但是在基于浏览器的SAPUI5JavaScript... 查看详情

UI5 - XML 片段中的格式化程序只执行一次。如何再次运行它们?

】UI5-XML片段中的格式化程序只执行一次。如何再次运行它们?【英文标题】:UI5-FormattersinXMLfragmentareexecutedonlyonce.Howtorunthemagain?【发布时间】:2018-03-0515:55:36【问题描述】:当一个sap.ui.xmlfragment被UI5渲染时,格式化程序只执行一... 查看详情

open(sap)ui5学习入门系列之一:扫盲与热身(下)

1 UI5代码结构上一次我们一起用了20秒的时间完成一个UI5版的HelloWorld。应用打开后有一个按钮,按钮的文字是HelloWorld,点击这个按钮之后,按钮会慢慢的消失掉(Fadeout)。那我们这次就来看一看为了实现这么一个简单的功能,O... 查看详情

SAP UI5 CDS Annotation,设置搜索过滤标签

】SAPUI5CDSAnnotation,设置搜索过滤标签【英文标题】:SAPUI5CDSAnnotation,setsearchfilterlabel【发布时间】:2019-03-1200:25:39【问题描述】:我是SAP和UI5的新手。我在SE11中创建了一个表,并在eclipseABAP透视图中创建了一个CDS视图。我已经在... 查看详情

SAP UI5 如何在 xml 视图中附加 HTML

】SAPUI5如何在xml视图中附加HTML【英文标题】:SAPUI5HowtoappendHTMLinxmlView【发布时间】:2019-02-2209:11:03【问题描述】:我想在xml视图中使用vis.js库。这是XML视图:<mvc:Viewxmlns:mvc="sap.ui.core.mvc"xmlns:m="sap.m"controllerName="com.asas.mes.controlle... 查看详情

open(sap)ui5学习入门系列之一:扫盲与热身(上)

什么是SAPFiori?了解SAPUI5必须要从SAPFiori开始,两者概念经常被混淆,而两者也确实有着非常紧密的关系。用过SAP的同学们都对SAP的传统的界面(SAPGUI)表示“呵呵”,其实传统的SAPGUI的界面功能还是很强大的,但是对于一个新... 查看详情

ui5-文档-4.36-deviceadaptation(代码片段)

现在,我们根据运行应用程序的设备配置控件的可见性和属性。通过使用sap.ui。设备API和定义一个设备模型,我们将使应用程序在许多设备上看起来很棒。Preview Onphonedevices,thepaneliscollapsedtosavescreenspaceandabuttonishiddenCodingYoucanvi... 查看详情

ui5-学习篇-1-开发工具及环境搭建(代码片段)

最近研究SAP-UI5好几个月了,将相关学习经历及问题点做个记录。1.先了解学习资料相关站点  SAP官网:https://www.sap.com/china/index.html  SAP开发工具:https://tools.hana.ondemand.com/#sapui5  UI5 Documentation:https://openui5.hana.ondemand.co... 查看详情

ui5-文档-4.35-responsiveness(代码片段)

...能力。SAPUI5应用程序可以在手机、平板电脑和桌面设备上运行,我们可以对应用程序进行配置,以便为每个场景充分利用屏幕空间。幸运的是,SAPUI5控件类似于sap.m.Table已经提供了许多我们可以使用的特性。PreviewAresponsivetableishid... 查看详情

Yarn v3.0.2 为啥不安装 node_modules 文件夹?需要在 yarn 的命令之后运行 npm install 吗?

...rnv3.0.2为啥不安装node_modules文件夹?需要在yarn的命令之后运行npminstall吗?【英文标题】:Yarnv3.0.2Whydonotinstallthenode_modulesfolder?Needtorunnpminstallaftertheyarn\'scommands?Yarnv3.0.2为什么不安装node_modules文件夹?需要在yarn的命令之后运行npmins... 查看详情

yarn run ios 运行模拟器但不显示app图标

】yarnrunios运行模拟器但不显示app图标【英文标题】:yarnruniosrunsthesimulatorbuttheappiconisnotdisplayed【发布时间】:2018-12-0715:22:36【问题描述】:我刚刚开始学习ReactNative,因为我想构建移动应用程序。为此,我使用安装了yarn、create-re... 查看详情

ui5-文档-2-开发环境

这一部分将指导您安装、配置和设置SAPUI5开发环境的最常见和推荐用例。请注意:您可以在不同的平台上使用SAPUI5。各自平台的许可和维护条件也适用于SAPUI5。例如,如果在SAP云平台上使用SAPUI5工具,则适用SAP云平台的许可和维... 查看详情

yarn

...个分布式的操作系统平台,而mapreduce等运算程序则相当于运行于操作系统之上的应用程序Yarn的重要概念1、 yarn并不清楚用户提交的程序的运行机制2、 yarn只提供运算资源的调度(用户程序向yarn申请资源,yarn就负责分配... 查看详情

使用 Yarn 2 的 PnP 运行脚本

】使用Yarn2的PnP运行脚本【英文标题】:RunningscriptswithYarn2\'sPnP【发布时间】:2021-02-1504:32:47【问题描述】:要,应该运行yarnnodescript.js,而不是nodescript.js。有没有一种通用的方式来运行像ts-node这样的东西(即你不直接调用node,... 查看详情

自动设置 Dataproc 集群后 Yarn/Spark 的内存分配不正确

...2016-02-0912:27:59【问题描述】:我正在尝试在Dataproc集群上运行Spark作业,但由于Yarn配置错误,Spark无法启动。从shell(本地主机上)运行“spark-sh 查看详情

spark之参数介绍

...),什么是集群模式(clustermode)。我们知道,当在YARN上运行Spark作业时,每个Sparkexecutor作为一个YARN容器(container)运行。Spark可以使得多个Tasks在同一个容器(container)里面运行。yarn-cluster和yarn-client模式的区别其实就是ApplicationMaste... 查看详情

ui5-文档-2.1-使用openui5开发应用(代码片段)

...UI5的默认方式是从http://openui5.orgInformation的OpenUI5主页获取运行时,该主页发布在非sap站点上,并将其部署到Web服务器上。  1.转到http://openui5.org 查看详情

sparkonyarn的两种模式yarn-cluster和yarn-client

...实就是ApplicationMaster进程的区别,yarn-cluster模式下,driver运行在AM(ApplicationMaster)中,它负责向YARN申请资源,并监督作业的运行状况。当用户提交了作业之后,就可以关掉Client,作业会继续在YARN上运行。然而yarn-cluster模式不适合... 查看详情