如何将 ES Module 导入 UI5 控制器答案

【问题标题】：How to import ES Module into UI5 controller如何将 ES Module 导入 UI5 控制器
【发布时间】：2021-10-14 18:40:22
【问题描述】：

给定一个 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 Module 导入 UI5 控制器？

使用版本：OpenUI5 1.96.0

【问题讨论】：

不仅如此，您还可以考虑使用官方的 UI5 typescript 支持，它允许导入和导出语句github.com/SAP/ui5-typescript

标签： javascript sapui5 ui5-tooling

【解决方案1】：

UI5 默认使用 UMD 导入语法（sap.ui.define、sap.ui.require）。要让它理解其他模块类型，您必须“欺骗”它认为该模块是 UMD。

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

你必须建立一个合适的文件夹结构（package.json, ui5.yaml, webapp 文件夹）并且在ui5.yaml文件中你可以为相应的ES模块定义project shims。

一个便宜又实用的替代方案是包含 ES 模块槽 <script src="path/to/module" type="module"> 标签，但我不知道有人会推荐这个，因为这不允许捆绑。

【讨论】：

【解决方案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"
      }
    }
  }
}

【讨论】：

【解决方案3】：

如果它是一个模型，需要在系统范围内访问，最简单的方法是在 manifest.json 下的 sap.ui5/models 下声明它：

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

或者，可以从根视图的控制器（manifest.json 中的rootView）加载模型，这使得模型在整个应用运行期间可用于每个视图：

async loadDictionaryData(dataSource, modelName) {

    const dictionaryModel = new JSONModel();

    await dictionaryModel.loadData(dataSource);

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

}

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

【讨论】：