模块化规范：终于搞懂CommonJS、AMD、CMD、UMD、ESM

2023-04-17 21:56:47

模块化：提升前端代码的艺术

在前端开发的早期，脚本是以 <script> 标签引入的，这种方式虽然简单，但存在诸多弊端：脚本间容易冲突、加载顺序难以控制、维护困难。为了解决这些问题，模块化 应运而生。

模块化 是一种将代码组织成独立单元的规范，使代码更易读、易维护和可复用。以下我们来深入了解模块化的前世今生。

CommonJS：Node.js 的模块化规范

CommonJS 是 Node.js 中使用的模块化规范。它采用同步加载方式，即执行模块前会先将其加载到内存中。这种方式简单易懂，但也会阻塞后续代码执行，且不适用于浏览器环境。

代码示例：

// commonJS.js
module.exports = function() {
  // ...
};

AMD：浏览器的模块化规范

AMD（Asynchronous Module Definition）是 RequireJS 中使用的模块化规范。它采用异步加载方式，即先将模块加载到内存中，但不立即执行。这种方式不会阻塞后续代码执行，非常适用于浏览器环境。

代码示例：

// amd.js
define(['jquery'], function($) {
  // ...
});

CMD：另一款浏览器端的模块化规范

CMD（Common Module Definition）是 Sea.js 中使用的模块化规范。它与 AMD 非常相似，但有一些细微差别，例如使用 define() 函数定义模块。

代码示例：

// cmd.js
define(function(require, exports, module) {
  // ...
});

UMD：通用的模块化规范

UMD（Universal Module Definition）是一种可以在浏览器和 Node.js 中使用的通用模块化规范。它可以同时支持 CommonJS 和 AMD 两种加载方式。

代码示例：

// umd.js
(function(root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD
    define(['jquery'], factory);
  } else if (typeof module === 'object' && module.exports) {
    // CommonJS
    module.exports = factory(require('jquery'));
  } else {
    // 全局
    root.myModule = factory(root.jQuery);
  }
})(this, function($) {
  // ...
});

ESM：JavaScript 的原生模块化规范

ESM（ECMAScript Module）是 JavaScript 的原生模块化规范。它基于 JavaScript 语法实现，使用 import 和 export 定义和使用模块。ESM 语法简洁，性能优异，但需要浏览器和 Node.js 支持。

代码示例：

// esm.js
import $ from 'jquery';

export function myFunction() {
  // ...
}

模块化规范的比较

模块化规范	加载方式	适用环境	优缺点
CommonJS	同步加载	Node.js	简单易懂，但会阻塞后续代码执行，不适用于浏览器环境
AMD	异步加载	浏览器	不会阻塞后续代码执行，但语法稍显复杂
CMD	异步加载	浏览器	与 AMD 非常相似，但有一些细微差别
UMD	通用加载方式	浏览器和 Node.js	可以同时支持 CommonJS 和 AMD 两种加载方式，但代码体积较大
ESM	原生支持	浏览器和 Node.js	语法简洁，性能优异，但需要浏览器和 Node.js 支持