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

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

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

共享/Utils.js：

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

    return {...};
};

组件1/控制器/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 加载它们）。我们相信这与data-sap-ui-resourceroots='{"com.test": ""}为引导定义，但在 Component.js 或 manifest.json 文件中缺失。

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

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

我在这里最明显的问题是：如果您无论如何都使用组件概念，为什么您的共享代码也不是组件。组件不一定要有 UI，这就是为什么有一个UIComponent和一个简单的Component继承自。您只需将其作为组件 1/组件 2 的依赖项加载，如下所示：

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

如果使用组件不适合您，您还可以将实用程序打包为库。您可能想查看grunt-openui5 https://github.com/SAP/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"));