如何在Webpack构建时忽略await/promises，避免模块变为Promise？

核心原因是顶层await会让ES模块被Webpack处理为异步模块，输出结果自动包装为Promise。要保持原有的同步调用形式，需调整代码结构，将异步逻辑封装到函数内部，避免顶层await。

方法1：手动触发初始化，同步暴露方法 #

将配置加载和应用初始化逻辑封装为独立函数，同时暴露业务方法，由外部控制初始化时机：

修改后的source.js

let myObject;

// 暴露初始化函数，供外部调用
async function init() {
  const response = await fetch('./config.json');
  const config = await response.json();
  myObject = myApp(config);
  return myObject;
}

// 同步暴露业务方法，内部检查初始化状态
function myFunction() {
  if (!myObject) {
    throw new Error('请先调用 init() 完成配置加载');
  }
  return myObject.myFunction();
}

// 最终暴露到全局的对象
const myLibrary = {
  init,
  myFunction
};

外部调用示例：

// 先初始化，完成后调用方法
myLibrary.init().then(() => {
  myLibrary.myFunction();
});

// 初始化完成后，后续可直接同步调用
myLibrary.myFunction();

方法2：自动初始化，方法内部等待异步完成 #

自动触发初始化逻辑，将业务方法包装为异步函数，内部自动等待配置加载完成：

修改后的source.js

// 自动触发初始化，返回Promise
const initPromise = (async () => {
  const response = await fetch('./config.json');
  const config = await response.json();
  return myApp(config);
})();

// 暴露的方法自动等待初始化完成
const myLibrary = {
  async myFunction() {
    const myObject = await initPromise;
    return myObject.myFunction();
  }
};

外部调用示例：

// 异步上下文直接调用
await myLibrary.myFunction();

// 或用链式调用
myLibrary.myFunction().then(result => {
  // 处理返回结果
});

这种方式无需手动调用初始化，方法内部自动处理异步等待，体验更接近原同步调用。

方法3：IIFE自动初始化，同步暴露方法（需控制调用时机） #

用立即执行函数表达式包装异步初始化逻辑，同步暴露方法，但调用时需确保初始化已完成：

修改后的source.js

let myObject;

// 模块加载后自动触发初始化
(async () => {
  const response = await fetch('./config.json');
  const config = await response.json();
  myObject = myApp(config);
})();

// 同步暴露方法，内部检查初始化状态
const myLibrary = {
  myFunction() {
    if (!myObject) {
      throw new Error('配置加载中，请稍后重试');
    }
    return myObject.myFunction();
  }
};

适合能确保调用时机晚于初始化完成的场景（如页面加载完成后调用）。

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