前端模块化工具对比

1.AMD（require.js）

使用简图

// define([其他模块],function(){})

// 模块的定义
define( function(){

  var add = function( a,b ){
    return a+b
  }

  return {
    num: 0
  }
})

require(['./01-AMD'],function($,math){
  math.add()
})

2.CMD(sea.js)

使用简图

//定义模块

define(function(require, exports, module) {
  var $ = require('jquery.js');
  var add = function(a,b){
      return a+b;
  }
  exports.add = add;
});



// 引用

seajs.use(['math.js'], function(math){
  var sum = math.add(1+2);
});

Common.js

使用简图

//1. 模块定义
const num = 0 ;

// 2. 模块的导出
module.exports = num


// 3. 模块引用

const num = require('./num.js')

es6

使用简图

//1. 模块的定义

const state = {}


// 2. 模块的导出

export default state    


//3. 引用

import state from './state'

/1. 模块的定义

const state = {}


// 2. 模块的导出

export {
  state
}


//3. 引用

import {state} from './state'


/*

总结： 
  export  vs   export default 

    1. export 可以导出多个（批量到处） ， 但是export default默认导出一个
    2. export 导入时，要用一个对象接收
        import { state } from './state'
        import * as type from './type'
*/