如何将ES Module导入OpenUI5 1.96版本的UI5控制器中？

问题原因 #

OpenUI5 1.96版本默认使用AMD模块化规范（即sap.ui.define/sap.ui.require这套加载机制），原生不识别ES Module的export/import语法，这是报错的核心原因。

可行解决方案 #

方案1：改写为UI5兼容的AMD模块（最稳定，推荐生产环境使用） #

直接修改dictionaryAPI.js的代码，适配UI5的AMD规范，不需要修改原有引用逻辑：

sap.ui.define([], function () {
    "use strict";
    return Object.freeze({
        DICTIONARY_API: {
            someKey: "someValue"
        }
    });
});

改完后直接用原有代码的引入方式即可正常使用：

sap.ui.define([
    "com/myApp/dictionaryAPI"
], (dictionaryAPI) => {
    // 直接通过dictionaryAPI.DICTIONARY_API访问常量
    console.log(dictionaryAPI.DICTIONARY_API.someKey)
    return {/* 原有业务逻辑 */}
});

方案2：开启UI5的ES Module支持（无需修改原有ES Module代码） #

OpenUI5 从1.94版本开始支持实验性的ES Module加载能力，1.96版本可以通过配置开启：

1. 在项目入口index.html的script标签（加载sap-ui-core.js的bootstrap标签）中添加配置参数：

   <script id="sap-ui-bootstrap"
       src="你的ui5核心资源路径/sap-ui-core.js"
       data-sap-ui-xx-support-esmodules="true"
       <!-- 其他原有配置 -->
   ></script>
   

2. 如果你使用UI5 Tooling做项目构建，需要在ui5.yaml中添加ES Module打包配置：

   builder:
     settings:
       includeEsm: true
   

配置完成后，原有带export语法的ES Module代码无需修改，直接用现有引入逻辑即可加载。

注意：该功能在1.96版本属于实验特性，生产环境使用需要做好兼容性验证，1.114及以上版本ES Module支持已正式稳定，无需开实验参数。

方案3：构建时转译ES Module #

如果不想修改源码也不想使用实验特性，可以在项目构建流程中接入Babel，通过@babel/plugin-transform-modules-amd插件自动将ES Module的export语法转译为UI5兼容的AMD规范代码。

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