回答

JavaScript 的四种常见模块格式（IIFE、ESM、UMD、CJS）主要区别在于使用场景、语法和兼容性。以下是简明对比：

1. IIFE（Immediately Invoked Function Expression）

本质：不是模块系统，而是一种立即执行函数的写法。

特点：

用 (function(){...})() 包裹代码，避免污染全局作用域。

无模块导入/导出能力。

用途：早期浏览器端“伪模块”，现已基本被替代。

示例：

(function() {
  var name = 'IIFE';
  window.myLib = { name };
})();

2. CJS（CommonJS）

环境：Node.js 原生支持（不支持浏览器直接运行）。

语法：

导出：module.exports = ... 或 exports.xxx = ...

导入：const mod = require('mod')

特点：

同步加载，适合服务器端。

每个文件是一个模块。

示例：

// math.js
exports.add = (a, b) => a + b;

// main.js
const { add } = require('./math');

3. ESM（ECMAScript Modules）

环境：现代浏览器 + Node.js（需 .mjs 或 package.json 中设 "type": "module"）。

语法：

导出：export / export default

导入：import xxx from '...'

特点：

静态分析（编译时确定依赖），支持 tree-shaking。

异步加载（浏览器中）。

示例：

// math.js
export const add = (a, b) => a + b;

// main.js
import { add } from './math.js';

4. UMD（Universal Module Definition）

目标：一套代码兼容多种环境（浏览器全局变量 / AMD / CommonJS）。

用途：开源库（如 jQuery、Lodash）常用，确保在任何环境下都能用。

特点：代码较复杂，是“兼容性兜底方案”。

示例（简化版）：

(function (root, factory) {
  if (typeof module === 'object' && module.exports) {
    // CommonJS
    module.exports = factory();
  } else if (typeof define === 'function' && define.amd) {
    // AMD
    define(factory);
  } else {
    // 浏览器全局变量
    root.myLib = factory();
  }
}(typeof self !== 'undefined' ? self : this, function () {
  return { name: 'UMD' };
}));

趋势：新项目优先用 ESM；发布库时可打包成 UMD + ESM 双版本。