使用esbuild打iife包时如何加载依赖主包的动态扩展模块

你遇到的Dynamic require of '...' is not supported报错是esbuild对iife格式的默认限制导致的：esbuild打包iife产物时，会将所有模块编译到闭包内部，自动生成的__require方法仅能访问打包阶段就静态确定的模块映射表，运行时动态引入的模块路径不在该表内，就会触发该错误，和你推测的「运行时无法获取主包模块组成信息」的结论完全一致。

这种场景完全可以实现依赖主包模块的外部扩展动态加载，只需调整打包配置与模块暴露规则即可，具体步骤如下：

• 第一步：主应用打包时主动暴露公共模块
  配置esbuild的globalName参数，将主应用挂载到全局命名空间，同时通过footer配置把允许扩展调用的公共模块统一导出到全局映射表。参考配置：

  // 主应用 esbuild 配置
  import esbuild from 'esbuild'
  
  esbuild.build({
    entryPoints: ['src/index.ts'],
    bundle: true,
    format: 'iife',
    globalName: 'MainApp', // 自定义全局命名空间，避免全局变量冲突
    outfile: 'dist/main.js',
    footer: {
      js: `
        // 暴露给扩展的公共模块映射表
        MainApp.__sharedModules = {
          './utils': require('./src/utils/index.ts'),
          './core': require('./src/core/runtime.ts'),
          // 按需添加其他允许扩展调用的模块
        };
      `
    }
  })
  

• 第二步：扩展模块打包时声明主包依赖为外部依赖
  给扩展的esbuild配置添加external字段，把所有依赖主应用的模块标记为外部依赖，同时通过define配置替换导入逻辑，直接指向主应用暴露的公共模块映射表。参考配置：

  // 扩展模块 esbuild 配置
  import esbuild from 'esbuild'
  
  esbuild.build({
    entryPoints: ['src/index.ts'],
    bundle: true,
    format: 'iife',
    outfile: 'dist/extension.js',
    // 标记所有主包依赖为外部依赖，不编译进扩展产物
    external: ['@main/*'],
    define: {
      // 替换导入语句，直接读取主包暴露的模块
      'require("@main/': 'MainApp.__sharedModules["'
    }
  })
  

• 第三步：调整动态加载逻辑
  不要使用原生动态import加载iife格式的扩展产物，改用fetch拉取扩展代码后手动执行，确保扩展运行时可以访问到主应用挂载的全局命名空间。参考实现：

  async function loadExtension(extensionUrl: string) {
    const response = await fetch(extensionUrl);
    const extensionCode = await response.text();
    // 手动执行扩展代码
    new Function(extensionCode)();
  }
  

• 暴露给扩展的公共模块需要做好版本兼容标记，避免主应用迭代后旧扩展无法正常运行
• 可以给公共模块映射表添加访问校验逻辑，禁止扩展访问未开放的内部模块，降低安全风险
• 如果没有强iife格式要求，也可以将主应用和扩展都打包为esm格式，配合external配置直接使用原生动态import，无需额外处理全局挂载，适配性更高

内容的提问来源于stack exchange，提问作者Oliver Bock