如何将ES模块导入UI5控制器 [英] How to import ES Module into UI5 controller

问题描述

给定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

UI5

UI5默认使用推荐答案导入语法(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">标签，但我不知道有谁会推荐这个，因为这不允许捆绑。

这篇关于如何将ES模块导入UI5控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！