CMD、AMD、CommonJS、ES6在webpack中使用及区别

最新推荐文章于 2024-11-16 22:35:42 发布

Yonge_F

最新推荐文章于 2024-11-16 22:35:42 发布

阅读量455

点赞数

CC 4.0 BY-SA版权

分类专栏：转载入门文章标签： webpack es6

本文链接：https://blog.youkuaiyun.com/Yongle_F/article/details/102821200

转载同时被 2 个专栏收录

3 篇文章

订阅专栏

入门

3 篇文章

订阅专栏

本文深入探讨了不同环境下的模块化编程方法，包括CommonJS、AMD、ES6等，讲解了如何使用exports、module.exports和export进行模块的导出与导入，并提供了实际代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

定义如下：

//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

第一种导入导出方式 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