不同的 JavaScript 模块系统

在 JavaScript 模块化开发中，有多种不同的模块化方案，其中最常用的有 umd、commonjs、esm、amd 和 cmd。本文将会介绍它们之间的区别和使用的方式。

UMD

UMD (Universal Module Definition) 是一种通用模块定义规范，可以在浏览器端和 Node.js 中使用。UMD 模块定义代码通常类似于下面的代码：

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    define([], factory)
  } else if (typeof exports === 'object') {
    module.exports = factory()
  } else {
    root.returnExports = factory()
  }
})(typeof self !== 'undefined' ? self : this, function () {
  return {
    /* 模块代码 */
  }
})

其中，define、exports 和 returnExports 分别对应了 AMD、CommonJS 和全局变量的情况，通过判断环境自动选择合适的方案。

CommonJS

CommonJS 是 Node.js 中使用的模块化规范，它采用了同步加载模块的方式，使用 require() 函数引入模块，使用 module.exports 将模块导出。一个简单的 CommonJS 模块示例如下：

// math.js
function add(a, b) {
  return a + b
}
module.exports = { add }

// main.js
const math = require('./math')
console.log(math.add(1, 2)) // 输出 3

ES Modules

ES Modules 是 ECMAScript 6 中新增的模块化规范，它采用了异步加载模块的方式，使用 import 和 export 关键字导入导出模块。一个简单的 ES Modules 示例如下：

// math.js
export function add(a, b) {
  return a + b
}

// main.js
import { add } from './math.js'
console.log(add(1, 2)) // 输出 3

AMD

AMD (Asynchronous Module Definition) 是一种异步模块加载规范，用于浏览器端的模块化开发。它采用了类似于 CommonJS 的 require() 函数来引入模块，使用 define() 函数来定义模块。一个简单的 AMD 示例如下：

// math.js
define(function () {
  return {
    add: function (a, b) {
      return a + b
    },
  }
})

// main.js
require(['./math'], function (math) {
  console.log(math.add(1, 2)) // 输出 3
})

CMD

CMD (Common Module Definition) 是一个类似于 AMD 的异步模块定义规范，用于浏览器端的模块化开发。它采用了 define() 函数来定义模块，并使用 require() 函数来引入模块。一个简单的 CMD 示例如下：

// math.js
define(function (require, exports, module) {
  exports.add = function (a, b) {
    return a + b
  }
})

// main.js
define(function (require) {
  const math = require('./math')
  console.log(math.add(1, 2)) // 输出 3
})

以上是 umd、commonjs、esm、amd 和 cmd 的区别和使用示例，根据实际需求选择合适的模块化方案可以提高开发效率和代码可维护性。