没问题，我帮你把UMD的实现拆解清楚，分无依赖和有依赖两种场景给你写示例，完全覆盖你要的浏览器全局调用、CommonJS/AMD工具兼容的需求。

一、无依赖的UMD模块实现 #

这是最基础的场景，你的模块不需要依赖其他包，核心是把Mod对象及其子函数/子模块正确暴露到不同环境中：

// mod.js
(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // 兼容AMD（RequireJS）
    define([], factory);
  } else if (typeof module === 'object' && module.exports) {
    // 兼容CommonJS（Node.js、Webpack、Browserify）
    module.exports = factory();
  } else {
    // 浏览器全局环境，挂到window对象上
    root.Mod = factory();
  }
}(typeof self !== 'undefined' ? self : this, function () {
  // 模块核心逻辑：定义Mod对象和子函数
  var Mod = {};

  // 顶层方法
  Mod.DoSomething = function () {
    return "执行了DoSomething";
  };

  // 子模块Utils
  Mod.Utils = {
    DoSomethingElse: function () {
      return "Utils里的DoSomethingElse执行了";
    },
    AnotherUtilMethod: function () {
      return "另一个工具方法";
    }
  };

  // 返回模块对象
  return Mod;
}));

代码说明： #

• 外层的自执行函数会自动检测当前环境：先判断AMD（RequireJS），再判断CommonJS（Node/Webpack），最后兜底到浏览器全局。
• 核心逻辑都在factory函数里，你只需要在里面定义Mod的结构，包括顶层方法和子模块，最后返回即可。

二、有依赖的UMD模块实现 #

如果你的模块需要依赖其他包（比如lodash），只需要在UMD的依赖声明部分做调整，以依赖lodash为例：

// mod-with-deps.js
(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD环境：声明依赖的包名
    define(['lodash'], factory);
  } else if (typeof module === 'object' && module.exports) {
    // CommonJS环境：通过require引入依赖
    module.exports = factory(require('lodash'));
  } else {
    // 浏览器全局环境：假设依赖的包已经挂在window._上
    root.Mod = factory(root._);
  }
}(typeof self !== 'undefined' ? self : this, function (_) {
  var Mod = {};

  Mod.DoSomething = function (arr) {
    // 使用lodash的方法
    return _.sortBy(arr);
  };

  Mod.Utils = {
    DoSomethingElse: function (str) {
      return _.upperCase(str);
    }
  };

  return Mod;
}));

代码说明： #

• 不同环境下的依赖引入方式不同：AMD用define的依赖数组，CommonJS用require，浏览器全局则直接取window上的全局变量（需要确保依赖包在你的模块之前加载）。
• 依赖会作为参数传给factory函数，你在模块逻辑里直接使用即可。

三、各环境下的使用方式 #

1. 浏览器全局环境
   在HTML中直接引入你的模块脚本：

   <script src="mod.js"></script>
   <script>
     // 直接调用顶层方法
     console.log(Mod.DoSomething());
     // 调用子模块方法
     console.log(Mod.Utils.DoSomethingElse());
   </script>
   

2. CommonJS环境（Node.js/Webpack/Browserify）
   通过require引入：

   var Mod = require('mod');
   // 调用方法
   var result1 = Mod.DoSomething();
   var result2 = Mod.Utils.DoSomethingElse();
   

3. AMD环境（RequireJS）
   用define加载模块：

   require(['mod'], function(Mod) {
     Mod.DoSomething();
     Mod.Utils.DoSomethingElse();
   });
   

这样写出来的模块完全符合你的需求：既可以在浏览器里直接调用Mod的子函数，也能兼容各种打包工具，同时支持NPM项目的require引入。

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