CommonJs

CommonJs 规定每个 js 文件都能被看作是一个模块， 其内部定义的变量是私有的， 不会对外暴露。不会污染全局。
CommonJs 采用同步（一个接着一个）的加载模块， 适用于服务器，不适合在浏览器端使用。
CommonJs 不被浏览器端支持， 因为浏览器没有 module, exports, require, global 四个环境变量。
如果要在浏览器使用CommonJs , 需要使用工具转换（browserify）
主要有以下方式对模块进行导入导出：

1. module.exports = { a: 12, foo: function(){ console.log(this.a) } }
   导出为一个对象
   var obj = require('./m1.js')
obj.a = 34
obj.foo()
2. module.exports = function(){ return {a: 12} }
   导出是一个函数， 可以直接执行
   var foo = require('./m2.js')
foo()
3. exports.foo = function(){ return {a: 12}}
   导出为一个对象， 对象里面的属性为foo
var obj = require('./m3.js')
obj.foo()
   注意： 不是使用import, import是ES6的语法
   想要在浏览器环境中使用：
   在index.js中将模块导入， 然后node使用如下命令：
   browserify index.js -o bundle.js 前提是安装了browserify这个包。
   然后在html里面引入bundle.js

AMD

不同于CommonJs， AMD是异步加载， 名称就是Asynchronous Module Difinition, 允许指定回调函数， 等异步加载完成之后即可调用回调函数。
AMD的核心思想就是通过define来定义模块， 然后通过require来加载模块， 它依赖于require.js
在html文件里面引入script
<script src="require.js" data-main="./index.js"></script>
定义模块 m1：

define([模块名称], [依赖模块], function(){
  name: 'vey-module-1',
  getName: function(){
    return name
  }
  return {getName: getName}
})

模块名称定义此模块的名称， 不写则默认为文件名去掉后缀
依赖模块指定此模块依赖的模块， 类型为数组。
此模块的内容定义在function里面
再定义一个模块 m2

define(['m1'], function(m1){
  name: 'vey-module-2',
  function show() {
    console.log(name, m1.getName())
  }
  return { show }
})

定义index.js

(function(){
  // 配置模块的路径
  require.config({
    paths: {
      m1: './m1'
      m2: './m2'
    }
  })
  require(['m2'], function(m2){
    m2.show()
  })
})()

然后就可以看到执行结果了。
AMD是依赖前置的， 即不管你用没用到， 只要你设置了依赖， 就会去加载。不是按需加载的。

CMD

相比AMD, CMD也同样是异步加载， AMD是依赖前置， CMD是就近加载， 按需加载的。主要产物就是sea.js
核心思想与AMD高度类似， 通过define定义模块， require加载模块
<script src="sea.js"></script>
<script> seajs.use('./index.js') </script>
定义 m1:

define(function (require, exports, module) {
    var msg = 'm1'
    function foo() {
        console.log(msg);
    }
    module.exports = {
        foo
    }
})

定义 m2:

define(function (require, exports, module) {
    var msg = 'm2'
    function bar() {
        console.log(msg);
    }
    module.exports = bar
})

定义 m3：

define(function (require, exports, module) {
    var msg = 'm3'
    function fun() {
        console.log(msg);
    }
    exports.fun = fun
})

定义 m4：

define(function (require, exports, module) {
    var msg = 'm4'
    var m2 = require('./m2')
    m2()
    require.async('./m3', function(m3){
        m3.fun()
    })
    function func () {
        console.log(msg)
    }
    exports.func = func
})

定义 index.js:

define(function (require, exports, module) {
  var m1 = require('./m1')
  m1.foo()
  var m4 = require('./m4')
  m4.func()
})

ESM

所谓ESM, 即ECMAScript2015 Module. 也就是ES6中的模块化。
ES6自带模块化， 从语言的标准上实现了模块化， 使用export导出， import导入。

let a = 10
let b = 20
let c = 'aaa'
export function myFun(){}
export default foo(){} 

export default 默认导出, 不管是否导出其他， 这个后面跟的东西一定会被导出， 而且只能写一个默认导出
ES6 的导入导出平时用的最多， 也比较熟悉， 这里就不再啰嗦。