OpenUI5多组件应用构建问题：依赖组件未纳入输出目录

我有一个OpenUI5项目结构如下：

my-app/
├─ node_modules/
├─ RootComponent/
│  ├─ package.json
│  ├─ ui5.yaml
│  ├─ webapp/
│  |  ├─ manifest.json
│  |  ├─ Component.js
├─ UserComponent/
│  ├─ package.json
│  ├─ ui5.yaml
│  ├─ webapp/
│  |  ├─ manifest.json
│  |  ├─ Component.js
├─ AdminComponent/
│  ├─ package.json
│  ├─ ui5.yaml
│  ├─ webapp/
│  |  ├─ manifest.json
│  |  ├─ Component.js
├─ package.json
├─ README.md

执行npm install后，用UI5 CLI构建RootComponent时，UserComponent和AdminComponent未被纳入输出，控制台报错：

**** error: missing module my/app/user/Component.js

参考官方示例执行ui5 build --all可将依赖组件打包到resources文件夹，但自己的项目执行相同命令后，resources仅包含sap.*包，导致运行RootComponent时出现404错误。

以下是关键配置片段：

RootComponent/package.json #

{
    "name": "my-app-root",
    "version": "1.0.0",
    "scripts": {
        "build": "ui5 build self-contained --all --dest=../../webapp --clean-dest",
        // ...
    },
    "dependencies": {
        "my-app-user": "file:../UserComponent",
        "my-app-admin": "file:../AdminComponent"
    },
    "devDependencies": {
        // ...
    }
}

RootComponent/ui5.yaml #

specVersion: "3.0"
metadata:
  name: my.app.root
type: application
builder:
  customTasks:
  - name: ui5-tooling-modules-task
    afterTask: replaceVersion
server:
  customMiddleware:
    - name: ui5-middleware-livereload
      afterMiddleware: compression
framework:
  name: OpenUI5
  version: "1.118.0"

RootComponent/webapp/manifest.json #

{
    "_version": "1.12.0",
    "sap.app": {
        "id": "my.app.root",
        "type": "application",
        "i18n": "i18n/i18n.properties",
        "title": "{{appTitle}}",
        "description": "{{appDescription}}",
        "applicationVersion": {
            "version": "1.0.0"
        }
    },
    "sap.ui": {
        // ...
    },
    "sap.ui5": {
        "rootView": {
            // ...
        },
        "componentUsages": {
            "UserComponent": {
                "name": "my.app.user",
                "settings": {},
                "componentData": {},
                "lazy": true
            },
            "AdminComponent": {
                "name": "my.user.admin",
                "settings": {},
                "componentData": {},
                "lazy": true
            }
        },
        "dependencies": {
            "minUI5Version": "1.118.0",
            "libs": {
                "sap.ui.core": {},
                "sap.m": {}
            },
            "components": {
                "my.app.user": {},
                "my.app.admin": {}
            }
        },
        "models": {
            "i18n": {
                // ...
            }
        },
        "routing": {
            "config": {
                // ...
            },
            "routes": [
                // ...
            ],
            "targets": {
                "user": {
                    "type": "Component",
                    "usage": "UserComponent"
                },
                "admin": {
                    "type": "Component",
                    "usage": "AdminComponent"
                }
            }
        }
    }
}

UserComponent/package.json #

{
    "name": "pars-web-user",
    "version": "1.0.0",
    "scripts": {
        "build": "ui5 build --clean-dest --all"
        // ...
    },
    "dependencies": {
        // ...
    },
    "devDependencies": {
        // ...
    }
}

UserComponent/webapp/manifest.json #

{
    "_version": "1.12.0",
    "sap.app": {
        "id": "my.app.user",
        "type": "application",
        "i18n": "i18n/i18n.properties",
        "title": "{{appTitle}}",
        "description": "{{appDescription}}",
        "applicationVersion": {
            "version": "1.0.0"
        }
    },
    // ...
}

你需要修正以下几处配置，确保UI5 Tooling能识别并打包依赖组件：

1. 对齐子组件package.json的名称与依赖 #

RootComponent依赖的是my-app-user和my-app-admin，但UserComponent的package.json里name是pars-web-user，完全不匹配。修改UserComponent和AdminComponent的package.json：

UserComponent/package.json #

{
    "name": "my-app-user",
    "version": "1.0.0",
    "scripts": {
        "build": "ui5 build --clean-dest --all"
        // ...
    },
    "ui5": {
        "type": "application",
        "metadata": {
            "name": "my.app.user"
        }
    },
    "dependencies": {
        // ...
    },
    "devDependencies": {
        // ...
    }
}

AdminComponent/package.json #

同理，把name改为my-app-admin，并添加相同的ui5配置块，metadata.name设为my.app.admin。

2. 修正RootComponent中AdminComponent的名称拼写错误 #

在RootComponent的manifest.json里，componentUsages.AdminComponent.name写成了my.user.admin，与实际AdminComponent的sap.app.id不符，修正为：

"AdminComponent": {
    "name": "my.app.admin",
    "settings": {},
    "componentData": {},
    "lazy": true
}

3. 确保子组件的ui5.yaml配置正确 #

每个子组件的ui5.yaml需要明确版本和组件标识，比如UserComponent/ui5.yaml：

specVersion: "3.0"
metadata:
  name: my.app.user
type: application
framework:
  name: OpenUI5
  version: "1.118.0"

AdminComponent的ui5.yaml做同样配置，metadata.name设为my.app.admin。

4. 重新安装依赖并构建 #

• 回到RootComponent目录，执行npm install重新关联正确的依赖
• 执行构建命令：ui5 build self-contained --all --dest=../../webapp --clean-dest

完成以上修改后，UI5 Tooling会正确识别子组件为UI5模块，并将它们打包到输出目录的resources文件夹中，解决404和模块缺失的问题。

内容的提问来源于stack exchange，提问作者BenjyTec