UMD 规范介绍

UMD规范封装是指一种**通用模块定义（Universal Module Definition）**的代码封装方式，旨在让同一份JavaScript代码能够兼容多种模块化环境（如浏览器全局变量、CommonJS、AMD等）。以下是其核心要点：

1. 解决的问题

JavaScript有多种模块化方案：

• 浏览器环境：通过<script>标签直接引入，变量挂载到window对象。

• CommonJS：Node.js使用的require/module.exports语法。

• AMD：RequireJS等异步模块加载器使用的define语法。

• ES Modules：现代浏览器和构建工具支持的import/export语法。

UMD的作用是**“写一次，到处运行”**，让代码无需修改即可适配上述所有环境。

2. UMD的典型结构

一个基本的UMD封装模板如下：

(function (global, factory) {
  // 环境判断
  if (typeof exports === 'object' && typeof module !== 'undefined') {
    // CommonJS/Node.js环境
    module.exports = factory(require('dependency'));
  } else if (typeof define === 'function' && define.amd) {
    // AMD环境（如RequireJS）
    define(['dependency'], factory);
  } else {
    // 浏览器全局变量
    global.MyModule = factory(global.dependency);
  }
})(typeof self !== 'undefined' ? self : this, function (dependency) {
  // 模块实际代码
  return {
    myFunction: () => { /* ... */ }
  };
});

3. UMD的核心逻辑

1. 环境检测：

   • 判断是否存在exports和module（CommonJS）。

   • 判断是否存在define和define.amd（AMD）。

   • 否则挂载到全局对象（如window）。

2. 依赖注入：

   • 通过参数传递依赖（如require('vue')），确保模块能正确访问外部库。

3. 工厂函数：

   • 实际模块逻辑封装在一个函数中，根据环境返回模块内容。

4. 实际应用场景

• 开发通用库：比如Vue插件、工具函数库，希望同时支持：

  <!-- 浏览器直接引入 -->
  <script src="my-library.umd.js"></script>

  运行 HTML

  // Node.js中使用
  const myLib = require('my-library');

  // AMD加载器（如RequireJS）
  define(['my-library'], function(myLib) { /* ... */ });

• 兼容旧项目：在混合使用不同模块化方案的老项目中，UMD可避免环境冲突。

5. 优缺点

6. 现代替代方案

随着ES Modules的普及，许多项目改用以下方式：

// 直接使用ES Modules语法
export default function myModule() { /* ... */ }

再通过构建工具（如Webpack、Rollup）打包生成UMD、CommonJS、ES Modules等多种格式。

总结：UMD是一种“兼容性封装”方案，适合需要广泛兼容性的库或工具。对于新项目，更推荐使用ES Modules配合现代构建工具，按需生成不同格式的产物。