关于结合静态导入（打包）与AMD风格动态导入的技术咨询：ES6 import() API的依赖管理困境及替代方案探讨

我完全懂你被各种模块化规范绕晕的痛苦——webpack的复杂配置、AMD调试的麻烦，还有想写出直观代码却被ES6异步导入卡壳的挫败感，太真实了。先给你吃个定心丸：ES6的import()完全适合依赖管理，你遇到的问题只是因为之前的ES模块规范限制，现在已经有了非常简洁的解决方案。

下面是几个贴合你需求的可行方案，按直观程度排序：

方案1：用ES2022顶级await实现理想写法 #

这是最接近你想要的“直观编码”的方案。ES2022引入了顶级await，允许在模块的顶级作用域中使用await，这直接解决了你之前“导出在Promise完成前执行”的问题。

现在主流浏览器（Chrome 89+、Firefox 89+、Safari 15.4+）已经原生支持顶级await，如果你团队的目标浏览器覆盖这些版本，直接写你理想中的代码就行：

// 完全符合你期待的写法，现在可以正常工作！
const Preact = await import("vendor/preact");
export default class StatefulComponent extends Preact.Component {
  render() {
    return "hello world";
  }
}

当其他模块导入这个组件时，会自动等待preact加载完成，不需要额外的初始化函数，源码层面干净到和同步导入几乎无差别。如果需要兼容旧浏览器，用Babel的@babel/plugin-syntax-top-level-await转译即可，转译后的代码会自动处理Promise逻辑，但源码依然保持直观。

方案2：封装极简加载器模拟AMD风格 #

如果顶级await的浏览器支持范围不够，或者你团队更熟悉AMD的语法，可以自己写一个超轻量的加载器，完全基于ES6import()实现，不用引入臃肿的requirejs：

首先定义一个全局的define函数（放在项目入口的loader.js里）：

// 极简模块加载器
const moduleCache = new Map();

async function define(deps, factory) {
  // 加载并缓存所有依赖
  const resolvedDeps = await Promise.all(
    deps.map(async dep => {
      if (moduleCache.has(dep)) return moduleCache.get(dep);
      const mod = await import(dep);
      const exportObj = mod.default || mod;
      moduleCache.set(dep, exportObj);
      return exportObj;
    })
  );
  // 执行模块工厂函数，得到导出内容
  const moduleExports = factory(...resolvedDeps);
  // 缓存当前模块（用脚本地址作为唯一标识）
  const currentModuleId = document.currentScript.src;
  moduleCache.set(currentModuleId, moduleExports);
  return moduleExports;
}

然后你的组件模块就可以用类似AMD的写法：

// components/StatefulComponent.js
define(["vendor/preact"], (Preact) => {
  return class StatefulComponent extends Preact.Component {
    render() {
      return "hello world";
    }
  };
});

使用模块时，同样通过define加载：

// 入口文件
define(["components/StatefulComponent"], (StatefulComponent) => {
  Preact.render(<StatefulComponent />, document.body);
});

这个加载器的好处是：语法和AMD高度一致，团队上手快；底层用原生ES模块实现，没有requirejs的调试复杂度；自带缓存，不会重复加载依赖，代码量也极小。

方案3：用Rollup替代Webpack（如果仍需打包） #

如果你还是需要打包共享库（比如把preact单独打包成vendor文件），但不想忍受webpack的繁杂配置，Rollup是绝佳替代——它天生为ES模块设计，配置极简，完美支持多入口+共享依赖拆分。

比如你的Rollup配置可以写成这样：

// rollup.config.js
export default {
  input: ["src/module1.js", "src/module2.js"], // 多入口
  output: {
    dir: "dist",
    format: "es", // 输出原生ES模块
    sourcemap: true
  },
  external: ["preact"], // 把preact标记为外部依赖，不打包进业务模块
  plugins: [
    // 按需添加插件：比如@rollup/plugin-babel转译ES6+，@rollup/plugin-node-resolve处理node_modules
  ]
};

打包后，你的业务模块可以用同步导入语法，Rollup会自动把共享依赖拆分出来，生成的文件直接在浏览器中用import加载即可，也可以结合动态导入实现按需加载。

最后总结 #

你完全不用退回到AMD/requirejs——ES6的import()是面向未来的依赖管理方案，只是之前的顶级作用域限制让你卡了壳。现在顶级await已经解决了核心问题，再配合极简加载器或Rollup，完全能实现你想要的“直观编码+异步加载+多入口共享依赖”的需求。

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