模块化

CommonJS

导出:module.exports

module.exports = {
    name: 'module1',    
    add: function (a, b){        
        return a + b;    
    }
}

导入：require

ES6 Module

导出：export / export default

export const name = 'tylor';

const name  = 'tylor';
const age = 20;
export {name, age}
//使用as
onst add = function (a, b) {
    return a + b;
}
export {add as func} //导入的变量就是func

export default {
    name : 'tylor',
    add : function (a, b){
        return a + b;
    }
}

导入：import

import {name, age as age1} from './module1.js'

import * as moduleName from './module2.js'

AMD

导出：

define(function () {  //用 define 来定义模块
  let msg = 'atguigu.com'

  function getMsg() {
    return msg.toUpperCase()
  }

  return {getMsg}  //用 return 来暴露数据
})

导入：

requirejs( ['loger'], function(loger) {
      loger.showMsg()
    })

CMD

define(function (require,exports,module) {
  var name = 'module4';

  function fun4() {
    console.log(name);
  }
  //同步引入module2
  let module2 = require('./module2')
  module2()
    
  //异步引入module3
  require.async('./module3',function (m3) {
    m3();
  })
  //暴露模块
  module.exports = fun4
});

---

Webpack先导篇之模块化（全）