webpack使用CMD、AMD、CommonJS、ES6区别以及运用

之前在网上浏览器的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