SAP UI5 + Yarn = 没有运行

Question

信息：NPM 有同样的问题

我想创建一个 UI5 项目，但应该使用 NPM 或 Yarn 导入 UI5。我从 Walkthrough 第 12 步下载了示例：https://sapui5.hana.ondemand.com/#/topic/4df1d914e52d4b1aa0805eb01522537e

并安装了 Yarn。文件 package.json 已存在于演示中，命令 yarn install（以及 npm install）将所有内容下载到 node_modules。然后我像这样更改 index.html 中的 src-attribute：

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>

我当前的错误提示某些不存在的文件是 required:

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'.

Answer 1

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

对于你的问题，看起来你混合了本地和服务器文件系统。 Node_modules 未被 ui5 serve 公开。显然您不能对您的文件系统进行 XMLHttpRequest 调用。

src="resources/sap-ui-core.js" 由服务器虚拟 created/mapped。

Answer 2

UI5 文档已经回答了您的问题，请参阅 App Development Using OpenUI5 部分 "App Development Using OpenUI5"。

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

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

如果你不想使用这样的中间件，那么要么需要额外的配置（就像你对资源和主题根所做的那样），要么你需要将所有文件一起复制到适合你的结构中需要。

然而，推荐的方法是上面概述的方法。

SAP UI5 + Yarn = 没有运行

SAP UI5 + Yarn = does not run

sapui5

yarnpkg

ui5-tooling

SAP UI5 + Yarn = 没有 运行

SAP UI5 + Yarn = does not run

sapui5

yarnpkg

ui5-tooling

SAP UI5 + Yarn = 没有运行