TIP

1. module.exports和exports是 commonJS 的规范
2. export和export default是 ES6 的规范
3. require是 AMD 规范的引入方式
4. import是 ES6 的一个语法标准

	export	export default	module.exports
来源	ES6(ESM)	ES6(ESM)	commonJS
单文件存在个数	多个	一个	一个
导入方式	import {}	import xxx	import或require

ESM和commonJS 的主要区别

• CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用
• CommonJS 模块是运行时加载，ES6 模块是编译时输出接口

module.exports和exports的使用

module代表当前文件是一个模块，这是一个对象，会创建exports属性，它的默认值是空对象

index.js

// 导入
const app = require('./app.js')
// 或这样
const { add, test } = require('./app.js')

app.js

function add(a, b) {
  return a + b
}
const test = 123
// 导出
module.export.add = add
module.export.test = 123

// 或这样
module.exports = { add, test }

// 或这样
module.export = (() => {
  return { add, test }
})()

注意

exports是module.exports的一个引用，它们都指向同一个内存地址，可以简单的理解为var exports = module.exports

module.exports和exports的区别

• require最终引入的其实都是module.exports，也就是真正执行导出的是module.exports
• exports不能导出匿名函数，因为它本身就是模块的一个属性，也不能写成exports = { test }，因为这样相当于给exports重新赋值，会改变它的引用地址
• exports是引用module.exports的值，module.exports被改变的时候，exports不会改变，看下面一个例子就知道

output.js

const test = require('./test')
const p = test.add
const b = test
console.log('p的值是：' + p) // p的值是：undefined
console.log('b的值是：' + b) // b的值是：1

test.js

exports.add = 100
module.exports = 1

可以看到，在module.exports的内存地址改变后，以exports.xxx形式导出的值在其他文件中也无法调用了

export和export default的使用

index.js

import test, { age } from './app'
test.say()
console.log(test.name, age)

app.js

const name = 'jandan'
const age = 18
const say = function () {
  console.log('hello world')
}

export { age }

// 一个模块文件只能有一个export default
export default { name, say }

export和export default的区别

• export default在一个模块中只能有一个，也可以没有，export可以有任意个
• export default导出的对象、变量、函数等可以没有具体的名字；而export导出的必须有名字