Javascript ES6 - 在不同的 .js 文件中导入函数或变量之前等待模块完成执行

我是 ES6 和导入/导出模块的新手，我对如何实现我想要的东西感到困惑。我有一个 .js 文件用于初始化 SDK，并且必须等待 dom 内容首先加载。

我还有其他较小的 .js 文件，我想在其中编写从第一个文件引用/导入应用程序对象的方法。但是，如果不将 DOMContentLoaded 中的所有内容也包装在这些较小的文件中，我就无法让它工作。

我想有一个更好的方法，而且我也认识到我在这里的整体方法可能会失败 - 我对 Javascript 相对较新，总的来说，我正在尝试找出将内容分解为多个 .js 文件以实现更清洁的最佳方法代码。谢谢。

// initializeSdk.js

import createApp from '@shopify/app-bridge';
export {app} // i want to export this object so other .js files can use it

var app;

document.addEventListener('DOMContentLoaded', () => {
    var data = document.getElementById('shopify-app-init').dataset;
        
    app = createApp({
      apiKey: data.apiKey,
      shopOrigin: data.shopOrigin,
      forceRedirect: true
    });

    return app;
});

// otherFile.js

import {app} from './initializeSdk.js';

console.log('app is ' + app) // returns undefined

  document.addEventListener('DOMContentLoaded', () => {
      console.log('app after waiting is ' + app) // this returns app object
  });

我认为构建这个的最好方法是让你的initializeSdk显式入口点，同时导入使用它的其他所需模块。例如：

// index.js

import createApp from '@shopify/app-bridge';
import { somethingThatUsesApp } from './somethingThatUsesApp';

document.addEventListener('DOMContentLoaded', () => {
    const data = document.getElementById('shopify-app-init').dataset;
    const app = createApp({
      apiKey: data.apiKey,
      shopOrigin: data.shopOrigin,
      forceRedirect: true
    });
    somethingThatUsesApp(app);
});

// somethingThatUsesApp.js
export const somethingThatUsesApp = (app) => {
  console.log('app is ' + app)
};

国际海事组织，有一个单一入口点，而其他模块导出功能only（可能将运行时依赖项作为参数）是组织事物的更​​好方法之一。