Skip to content

TIP

  1. module.exportsexports是 commonJS 的规范
  2. exportexport default是 ES6 的规范
  3. require是 AMD 规范的引入方式
  4. import是 ES6 的一个语法标准
exportexport defaultmodule.exports
来源ES6(ESM)ES6(ESM)commonJS
单文件存在个数多个一个一个
导入方式import {}import xxximportrequire

ESM和commonJS 的主要区别

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

module.exportsexports的使用

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

js
// 导入
const app = require('./app.js')
// 或这样
const { add, test } = require('./app.js')
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 }
})()

注意

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

module.exportsexports的区别

  • require最终引入的其实都是module.exports,也就是真正执行导出的是module.exports
  • exports不能导出匿名函数,因为它本身就是模块的一个属性,也不能写成exports = { test },因为这样相当于给exports重新赋值,会改变它的引用地址
  • exports是引用module.exports的值,module.exports被改变的时候,exports不会改变,看下面一个例子就知道
js
const test = require('./test')
const p = test.add
const b = test
console.log('p的值是:' + p) // p的值是:undefined
console.log('b的值是:' + b) // b的值是:1
js
exports.add = 100
module.exports = 1

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

exportexport default的使用

js
import test, { age } from './app'
test.say()
console.log(test.name, age)
js
const name = 'jandan'
const age = 18
const say = function () {
  console.log('hello world')
}

export { age }

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

exportexport default的区别

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

MIT License