webpack的多种导入导出方式

**

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
})

第二种使用moudle导出
//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))
//结果:1

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

你可能感兴趣的:(webpack的多种导入导出方式)