前端JS 模块规范 CommonJS、CMD、AMD、ESM

CommonJS

nodejs所采用的模块规范

导出模块：exports.myModule = function 或者 module.exports = {}

导入模块：var myModule = require("路径")

CMD(Common Module Definition，通用模块定义)

引入模块加载器：

模块加载器配置：seajs.config();

依赖并定义模块：

一个文件里可以定义多个模块，需要有不同的ID

define('模块ID', ['依赖模块路径 或 ID'], function (require, exports, module) {
var otherModule = require(module.dependencies[0]);  // 导入模块

exports.a = 1;  // 导出模块
module.exports = {}; // 导出模块
});

使用模块：

seajs.use('模块路径', function(模块实例){})

AMD(Asynchronous Module Definition ，异步模块定义)

引入模块加载器：

require配置：require.config();

依赖并定义模块：

define(["依赖模块路径"], function (依赖模块实例){
　　　　return {};
});

依赖模块：

require(["模块路径"], function(模块实例){

});

ESM(ECMA Script Module，ES标准模块)

导出模块:

   export m1;                // 模块成员
   export default m1;   //  模块默认成员
   export {                    //  给模块批量添加成员
       m1 as m3,            // 相当于 m3 = m1, export m3
       m2
   }

导入模块:

import {m1, m3 as m4, default as m} from '模块路径';   // 获取模块指定成员
import * as circle from './circle'; // 将所有模块成员放到对象 circle中
import m form './profile'; // 获取模块的默认成员

UMD(Universal Module Definition，万能模块定义)

一个兼容各种模块规范的模块定义写法

模块规范对比

包装或打包：AMD和CMD需要模块加载器，模块需要define函数包装，浏览器直接支持，不需要打包。CommonJS和ESM则相反。

通用性：ES标准模块最具通用性，方便兼容第三方模块和打包工具