之前在网上浏览器的webpack模块化很乱，而且也没有把CMD模块化使用讲清楚的，终于忍不下去，将几种模块化以一种清晰的方式写出来，这也是我一直想做的事，下面就来讲讲CMD、AMD、commonJs、es6模块化的运用。
CMD
CMD是seaJs在推广过程中生产的对模块定义的规范
属于同步模块定义，在哪里需要用就在哪里引入，
用define定义
定义方法： define(function(){require,exports, module})
require: 导入其他依赖的办法
exports、导出的方法 导出的方法
CMD有三种方式导出
第一种使用exports导出
//common.js
//使用define定义模块，require、exports、module是define自带的
define(function(require, exports, module){
//定义导出的方法
function minus(a, b) {
return a - b
}
// 使用exports导出
exports.minus = minus
})
第二种使用module导出
//common.js
//使用define定义模块，require、exports、module是define自带的
define(function(require, exports, module){
//定义导出的方法
function minus(a, b) {
return a - b
}
// 使用module.exports导出
module.exports = {
minus
}
})
第三种使用return 返回
//common.js
//使用define定义模块，require、exports、module是define自带的
define(function(require, exports, module){
//定义导出的方法
function minus(a, b) {
return a - b
}
// 使用return导出
return {
minus
}
})
都可以用同一种方法导入
let common= require('./common') // 文件相对路径
//调用减法的方法
console.log(common.minus(5,4))
//结果：１
AMD
AMD是requireJs在推广过程中生产的对模块定义的规范
属于异步模块定义，依赖前置，在最上面加载模块
使用define定义
define(依赖的模块，执行的回调函数)
定义如下如下：
//common.js
// define后使用[]的原因是没有依赖模块， 如果有使用，如：['jquery']
define([], function(){
// 导出方法
return function(a, b) {
return a - b
}
})
引用如下
//导入方法，require方法中有三个参数
//require(模块依赖，类型为数组[依赖的地址或模块名称], 会掉函数)
// 回调函数中会接收到模块作为参数，如下minus
require(['./common.js'], function(minus){
console.log(minus(5,4)) //结果：1
})
commonJS
commonjs使用模块化，经常用于后台 导入导出方法如下：
//common.js
module.exports = function(a, b) {
return a-b
}
引用如下
let minus = require('./common.js') //文件相对路径
console.log(minus(5,4))
// 结果： 1
es6
es6模块化 通常有两种方式导出export(导出), export default(默认导出)，通常采用import导入
下面分别使用两种方法导出
第一种导入导出方式 export
导出如下
// common.js
function minus(a,b) {
return a-b
}
// 使用export，一定要使用{}导出，否则会报错
export {
minus
}
导入如下
// import 后采用大括号导入，大括号中是变量名，变量名要跟导出的名称一致
// from 后跟文件文件路径 这里是相对路径
import {minus} from './common.js'
//调用方法
minus(5,4) //结果：1
//另一种导入方式 意思就是全部导入 as为重命名为导入的变量重新取一个名字
import * as common from './common.js'
// 调用方式
common.minus(5,4) //结果：1
第二种导出方式 export default
导出如下
// common.js
function minus(a,b) {
return a-b
}
// 使用export default 后不用使用{}
export default minus
导入如下
// import 后不采用{}导入，后跟的变量名可以随意更改，想取什么取什么
// from 后跟文件文件路径 这里是相对路径
import minus from './common.js'
//调用方法
minus(5,4) //结果：1
//我改为另一个名称
import common from './common.js'
// 调用方式
common(5,4) //结果：1
