如何让JS库同时兼容AMD与ES6模块加载方式？

问题背景 #

当前为每个模块维护两个独立JS文件：

• 一个用define(()=>{ ...语法适配AMD加载器
• 另一个用export { ModuleName}语法适配ES6模块

核心问题是export关键字只能在根作用域使用，无法放入条件判断中，导致用AMD加载器加载含export的文件时，会直接抛出SyntaxError: Unexpected token 'export'错误。

这是.NET WASM库的静态JS资源，需同时支持AMD和ES6两种加载场景，且没有下游编译流水线可在开发者编译阶段生成适配代码，只能通过运行时语法实现双兼容。

尝试过的失败代码 #

let SomeInteropHelpers = globalThis.SomeInteropHelpers || {};
define(() => {
    
    (function (SomeInteropHelpers) {
        var HelpersProxy = SomeInteropHelpers.HelpersProxy || {};// 创建子命名空间

        HelpersProxy.GetArrayObjectItems = function (arrayObject) {
            return arrayObject.items;
        }

        HelpersProxy.Check = function () {
            console.log('Checked');
        };

        SomeInteropHelpers.HelpersProxy = HelpersProxy; // 添加到父命名空间

    })(SomeInteropHelpers || globalThis.SomeInteropHelpers || (globalThis.SomeInteropHelpers = {}));
    
});

export { SomeInteropHelpers };

可行解决方案 #

采用环境检测+IIFE包裹的方式，避免根作用域出现ES6export关键字，同时适配不同加载环境：

(function (global) {
  // 核心模块逻辑，与原有逻辑一致
  const SomeInteropHelpers = global.SomeInteropHelpers || {};
  
  (function (ns) {
    const HelpersProxy = ns.HelpersProxy || {};

    HelpersProxy.GetArrayObjectItems = function (arrayObject) {
      return arrayObject.items;
    };

    HelpersProxy.Check = function () {
      console.log('Checked');
    };

    ns.HelpersProxy = HelpersProxy;
  })(SomeInteropHelpers);

  // 适配AMD环境（检测AMD规范标识）
  if (typeof define === 'function' && define.amd) {
    define([], () => SomeInteropHelpers);
  }
  // 适配ES6/CommonJS模块环境
  else if (typeof exports !== 'undefined') {
    module.exports = SomeInteropHelpers;
    // 额外支持ES6的export default语法
    exports.default = SomeInteropHelpers;
  }
  // 兜底：直接挂载到全局对象
  else {
    global.SomeInteropHelpers = SomeInteropHelpers;
  }
})(globalThis);

方案说明 #

1. IIFE隔离作用域：用立即执行函数包裹核心逻辑，避免污染全局变量，同时统一获取全局对象（globalThis兼容所有环境）
2. AMD适配：通过define.amd检测AMD环境，符合条件时用define导出模块，这是AMD规范约定的标准检测方式
3. ES6模块适配：利用CommonJS与ES6模块的兼容性，通过module.exports导出，同时添加exports.default支持import SomeInteropHelpers from 'xxx'语法
4. 无语法冲突：根作用域没有ES6export关键字，AMD加载器解析时不会触发语法错误；ES6模块加载器会正常识别module.exports导出的内容

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