Question

信息：NPM存在相同的问题

我想创建一个UI5项目，但是应该使用NPM或Yarn导入UI5。我从演练第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'.

Answer 1

UI5文档已经回答了您的问题，请参见App Development Using OpenUI5，“使用OpenUI5开发应用程序”部分。

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

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

如果您不想使用这样的中间件，则需要进行其他配置（如对资源根和主题根所做的那样），或者需要将所有文件一起复制到适合您需要的结构中。

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

Answer 2

接受正式的示例应用程序。 https://github.com/SAP/openui5-masterdetail-app

对于您的问题，您似乎将本地和服务器文件系统混合在一起。 ui5 serve不公开Node_modules。显然，您无法对文件系统进行XMLHttpRequest调用。

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

SAP UI5 +纱线=无法运行

2 个答案: