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

Question

给定一个 ES 模块dictionaryAPI.mjs：

\n

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

\n

我想将其导入到我的 UI5 控制器中。据我了解，UI5 不支持.mjs扩展，因此我已将扩展名从 更改.mjs为.js. 然后，我尝试将其添加到 UI5 控制器中，准确地说，添加到实用程序控制器中ControllerUtilities.js：

\n

sap.ui.define([\n    "com/myApp/dictionaryAPI"\n    ],\n    (dictionaryAPI) => ({\xe2\x80\xa6}));\n

\n

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

\n

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

\n

看起来，UI5 无法识别exportES 模块中的 statemen。

\n

是否有任何选项可以将 ES 模块导入 UI5 控制器？

\n

使用版本：OpenUI5 1.96.0

\n

Answer 1

UI5 默认使用 UMD 导入语法 ( sap.ui.define, sap.ui.require)。为了让它理解其他模块类型，你必须“欺骗”它认为该模块是 UMD。

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

您必须构建正确的文件夹结构（package.json、ui5.yaml、webapp 文件夹），并且在 ui5.yaml 文件中您可以为相应的 ES 模块定义项目垫片。

一个廉价而老套的替代方案是通过标签包含 ES 模块 <script src="path/to/module" type="module">，但我不知道有人会推荐这个，因为这不允许捆绑。