import module and use it in another script scope in the same html

Question

It can be as simple, but I couldn't find a way to solve it.

I am trying to import a module and use it in another script scope of 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');
}

Unfortunately I can't use all js in one <script> as it fails to run then. Any ways this can be done?

@JohannGoltz how do I do it on the index.html level? I see that I can only import modules from sap in that way. — Ren, May 11 '20 at 19:27
You would need to use `sap.ui.define` to export the function in `customFonts.js`. For details on loading modules in UI5, see [https://ui5.sap.com/#/topic/91f23a736f4d1014b6dd926db0e91070](the documentation). — Johann Goltz, May 12 '20 at 08:12

score 2 · Accepted Answer · answered May 11 '20 at 16:07

This works:

Save the function from the module to the window object,
After window.onload, the function will be available globally.

//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>

import module and use it in another script scope in the same html

1 Answers1