一个具有多个 component.js 的应用程序：如何加载共享模块？答案

【问题标题】：One app with multiple component.js: How to load shared modules?一个具有多个 component.js 的应用程序：如何加载共享模块？
【发布时间】：2016-07-26 14:53:15
【问题描述】：

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

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

共享/Utils.js：

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

    return {...};
};

component1/controller/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 加载它们） .我们认为这与 Component.js 或 manifest.json 文件中缺少的为引导定义的 data-sap-ui-resourceroots='{"com.test": ""} 有关。

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

【问题讨论】：

类似问题可以在这里找到：stackoverflow.com/questions/28016642/…

标签： sapui5

【解决方案1】：

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

我在这里遇到的最明显的问题是：如果您仍然使用组件概念，为什么您的共享代码也不是组件。组件不一定要有 UI，这就是为什么有一个 UIComponent 和一个简单的 Component 可以继承。您只需将它作为 component1/component2 的依赖项加载，如下所示：

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

如果您觉得使用组件不合适，您也可以将实用程序打包为库。您可能想查看grunt-openui5，它可以帮助您构建一个。

在不使用组件/库概念的情况下加载外部文件

无论如何，在引导程序上定义资源根类似于调用

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

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

您可以像这样使路径“相对”：

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

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

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

【讨论】：

从一堆实用模块/类中创建一个组件感觉不对，但最终可能是一个解决方案。我们玩过registerModulePath()，但正如你提到的那样，路径将是一个问题：如果我们需要指定绝对路径，我们如何保证可移植性？
它不一定是 UIComponent，Utility Component 只是继承自 Component。当然，把它做成图书馆会更好。您可以查看github.com/SAP/grunt-openui5 来构建一个。路径仍然是一个问题......我会尝试在那里找到更多信息
你可以试试这个有一个相对路径：jQuery.sap.registerModulePath("test.shared", jQuery.sap.getModulePath("com.test.Component1") +"/../共享）；
你能指出我的组件或库示例吗？不确定在 grunt 的上下文中在哪里寻找它。我将尝试将 registerModulePath 与 getModulePath 结合使用。
使用 getModulePath() 引用父目录不起作用。

【解决方案2】：

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

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

尽管documentation 中写了什么，这仍然有效：

以资源名称前缀为键的 URL 位置映射；只允许组件内部的相对路径，并且不允许使用“..”字符

【讨论】：