如何使用RequireJS加载同时包含AMD和非AMD模块的自定义第三方库

问题1：不修改第三方库的报错解决方案 #

可以解决，该报错本质是第三方库内部依赖的globals/window、globals/document模块未被RequireJS正确映射到全局对象，只需调整RequireJS配置即可，操作步骤如下：

• 先通过define定义两个虚拟模块，直接返回全局window和document对象，无需对应实体文件
• 配置该第三方库的shim规则，声明依赖上述两个虚拟模块，保证加载顺序正确

配置代码示例：

// 定义全局对象对应的虚拟模块
define('globals/window', [], () => window);
define('globals/document', [], () => document);

// RequireJS核心配置
require.config({
  paths: {
    // 替换为你的第三方库实际文件路径
    'custom-lib': 'path/to/your/custom-lib-build-file'
  },
  shim: {
    'custom-lib': {
      // 声明前置依赖
      deps: ['globals/window', 'globals/document'],
      // 库无统一导出对象时可省略该字段
      exports: 'window'
    }
  }
});

配置完成后正常加载库即可，无需修改第三方库任何源码。

问题2：window挂载属性的使用方式 #

根据项目编码规范可选择两种使用方式：

方式1：直接从window对象取值 #

库加载完成后直接从全局window对象读取暴露的属性，示例：

require(['custom-lib'], function() {
  // 直接调用window上挂载的库方法、属性
  const targetMethod = window.customLibMethod;
  const targetConfig = window.customLibConfig;
  targetMethod();
});

注意：所有调用逻辑必须放在库加载完成的回调函数内，避免属性未定义报错。

方式2：通过shim统一导出使用 #

如果不想在业务代码中直接引用window，可以在shim的exports字段配置统一的导出规则，后续通过require回调参数直接获取库属性：

// 配置示例
require.config({
  shim: {
    'custom-lib': {
      deps: ['globals/window', 'globals/document'],
      // 若库有统一顶层挂载对象（如window.MyLib）可直接填对象名
      exports: 'MyLib'
      // 若库属性零散挂载，可返回自定义对象聚合所有属性
      // exports: () => ({
      //   method1: window.libMethod1,
      //   method2: window.libMethod2,
      //   config: window.libConfig
      // })
    }
  }
});

// 使用示例
require(['custom-lib'], function(MyLib) {
  MyLib.method1();
  console.log(MyLib.config);
});

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