一个带有多个component.js的应用：如何加载共享模块？

Question

我们有一个SAPUI5应用程序，我们在相应的子文件夹中定义多个组件（即多个Component.js文件）作为应用程序根目录的直接子项。下图显示了项目结构：

组件1指定为com.test.component1，组件2指定为com.test.component2。共享代码位于root/shared中，并在每个组件的控制器中定义为依赖项。

共享/ Utils.js：

sap.ui.define([], function () {
    "use strict";

    return {...};
};

COMPONENT1 /控制器/ Controller1.js：

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "test/shared/Utils"
], function (BaseController, Utils) {
    "use strict";
    // controller code

});

在本地（或在WebIDE中）运行index.html文件这一切都有效，但是当我们尝试将不同的组件集成到Fiori Launchpad（它尝试从/ resources / shared加载它们）时，找不到共享资源。我们认为这与在boot.pping中定义的data-sap-ui-resourceroots='{"com.test": ""}有关，它在Component.js或manifest.json文件中缺失。

为各个组件注册资源路径com/test/shared的正确方法是什么？

Answer 1

解决此问题的一种方法是在应用程序描述符（manifest.json）中定义resourceRoots属性：

{
    ...
    "sap.ui5": {
        ...
        "resourceRoots" : {
            "com.test.shared": "./../shared"
        },
        ...
    }
}

尽管documentation中写的是

，但这仍有效

  

由资源名称前缀键入的URL位置的映射;只允许组件内部的相对路径，没有“..”字符

Answer 2

为您的实用程序使用组件/库

我在这里提出的最明显的问题是：如果您使用组件概念，为什么您的共享代码也不是组件。组件不一定必须具有UI，这就是为什么要继承UIComponent和简单Component的原因。您只需将其作为component1 / component2的依赖项加载，如下所示：

... 
return Component.extend("com.test.Component1", {
  metadata: {
    name: "Component1",
    dependencies: {
      libs: [ "sap.m" ],
      components: [ "test.shared" ]
  },
...

如果使用Component感觉不合适，您也可以将实用程序打包为库。您可能需要查看grunt-openui5，以帮助您构建一个。

不使用组件/库概念加载外部文件

无论如何在bootstrap上定义resourceroot类似于对

的调用

jQuery.sap.registerModulePath("test.shared", "/path/to/your/source");

您可以在两个组件init中注册共享模块的模块路径。您可能必须在那里使用绝对路径，因为根据执行上下文（启动板与独立），相对路径可能不同。

你可以把路径做成相对的＆＃39;像这样：

jQuery.sap.registerModulePath("test.shared", jQuery.sap.getModulePath("com.test.Component1") +"/../shared);

如果您希望共享资源也能从缓存清除中受益，您可能希望以后使用此功能：

sap.ui.core.AppCacheBuster.register(jQuery.sap.getModulePath("test.shared"));