导入模块并在同一 html 中的另一个脚本范围内使用它答案

【问题标题】：import module and use it in another script scope in the same html导入模块并在同一 html 中的另一个脚本范围内使用它
【发布时间】：2020-05-11 15:14:38
【问题描述】：

可以这么简单，但我找不到解决方法。

我正在尝试导入一个模块并在另一个script html 范围内使用它。

index.html

<script type="module">
   import defineCustomIcons from './webapp/utils/customFonts.js'
</script>
<script>
    sap.ui.getCore().attachInit(function () {
        sap.ui.require([
        ], function () {
            defineCustomIcons(jQuery);
            // some other code
        });
    });
</script>

customFonts.js

export default function defineCustomIcons(jQuery) {
  jQuery.sap.require('sap.ui.core.IconPool');
  sap.ui.core.IconPool.addIcon('sort_icon', 'customfont', 'icomoon', 'e900');
}

不幸的是，我不能在一个 <script> 中使用所有 js，因为它无法运行。有什么方法可以做到这一点？

【问题讨论】：

为什么不用sap.ui.require来导入函数呢？
@JohannGoltz 如何在 index.html 级别执行此操作？我看到我只能以这种方式从 sap 导入模块。
您需要使用sap.ui.define 导出customFonts.js 中的函数。有关在 UI5 中加载模块的详细信息，请参阅 [ui5.sap.com/#/topic/91f23a736f4d1014b6dd926db0e91070](the 文档）。

标签： javascript html ecmascript-6 sapui5 ui5-tooling

【解决方案1】：

这行得通：

将模块中的函数保存到window对象中，
window.onload之后，该功能将在全球范围内可用。

//file module.js
export default function moduleApp () {
  console.log('this is moduleApp');
}

<script type="module">
  import moduleApp from './module.js';
  window.moduleApp = moduleApp;
</script>
<script>
  window.onload = () => {
    moduleApp();
  }
</script>

【讨论】：