如何将ES模块导入UI5控制器

Question

给定 ES 模块

dictionaryAPI.mjs

:

export const DICTIONARY_API = Object.freeze({
    someKey: "someValue"
});

我想将其导入到我的 UI5 控制器中。据我了解，UI5 不支持

.mjs

扩展，因此我将扩展从

.mjs

更改为

.js

。然后，我尝试将其添加到 UI5 控制器中，准确地说，添加到实用程序控制器中

ControllerUtilities.js

:

sap.ui.define([
    "com/myApp/dictionaryAPI"
    ],
    (dictionaryAPI) => ({…}));

当我运行应用程序时，出现错误：

'com/myApp/controller/ControllerUtilities.js': Unexpected token 'export'

sap-ui-core.js:53 Uncaught (in promise) ModuleError: Failed to resolve dependencies of 'com/myApp/controller/Login.controller.js'
 -> 'com/myApp/controller/BaseController.js'
  -> 'com/myApp/controller/ControllerUtilities.js': Unexpected token 'export'
    at p1 (https://openui5nightly.hana.ondemand.com/resources/sap-ui-core.js:53:213)
    at j1.failWith (https://openui5nightly.hana.ondemand.com/resources/sap-ui-core.js:40:43)
    at https://openui5nightly.hana.ondemand.com/resources/sap-ui-core.js:65:1556
Caused by: SyntaxError: Unexpected token 'export'

看起来，UI5 无法识别 ES 模块中的

export

语句。

有没有选项可以将ES模块导入到UI5控制器中？

使用版本：OpenUI5 1.96.0

Answer 1

UI5 默认使用 UMD 导入语法（

sap.ui.define

、

sap.ui.require

）。为了让它理解其他模块类型，你必须“欺骗”它认为该模块是 UMD。

这可以通过使用 ui5 cli 来完成。

您必须构建适当的文件夹结构（package.json、ui5.yaml、webapp 文件夹），并且在 ui5.yaml 文件中您可以为相应的 ES 模块定义project shims。

一个廉价而hacky的替代方案是包含ES模块槽

<script src="path/to/module" type="module">

标签，但我不知道有谁会推荐这个，因为这不允许捆绑。

编辑：检查ui5-tooling-modules中间件/任务来自动执行此过程。

Answer 2

最好的解决方案是创建一个新模块，如fmi21提到的。

您的 API 可能如下所示，仅返回带有

DICTIONARY_API

的对象。因此您还可以向 API 添加更多属性。

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

    return {
        DICTIONARY_API : Object.freeze({
            someKey: "someValue"
        })
    }
});

然后您可以像在

ControllerUtilities.js

中一样导入它

您还可以通过

manifest.json

将 JSON 文件直接加载到模型中

{
  "sap.ui5": {
    "models": {
      "YOURMODELNAME": {
        "type": "sap.ui.model.json.JSONModel",
        "uri": "PATH TO JSON"
      }
    }
  }
}

Answer 3

如果它是一个模型，需要在系统范围内访问，最简单的方法是在

manifest.json

/

sap.ui5

下的

models

中声明它：

"dictionaryAPI": {
    "type": "sap.ui.model.json.JSONModel",
    "uri": "model/dictionaries/api.json"
},

或者，可以从根视图的控制器加载模型（

rootView

中的

manifest.json

），这使得模型在整个应用程序运行期间可用于每个视图：

async loadDictionaryData(dataSource, modelName) {

    const dictionaryModel = new JSONModel();

    await dictionaryModel.loadData(dataSource);

    this.getView().setModel(dictionaryModel, modelName);

}

无需关心数据同步/异步加载、复用、ESM/UMD等