大家真的懂module.exports，exports，export default，export吗？

本文会随着时间进行更新

再次更新：2019/10/16 15:39

两种暴露区别

• module.exports和exports是node(CommonJS)的语法
• export default和export是es6的语法

不同语法到底向外暴露了什么？我们到底接收到了啥？

es6语法的export default和export会暴露各自对象，对象数目不唯一

• 通过import获取的是export default暴露的对象

• 通过import{}获取的是export暴露的对象

• export default只能使用一次，export可以使用多次

  // 1.js文件内容：
  export default {
      a: 1
  }
  export let b = 1
  
  // 2.js文件内容
  import total from "./1"
  import {b} from "./1"
  console.log(total,b)
  
  // 输出结果：
  // { a: 1 } 1
  

node语法的module.exports和exports只对外暴露一个对象

• 这个对外暴露对象是以module.exports为主

  • 若module.exports对唯一的对象添加属性，则exports添加的属性有效
  • 若module.exports并不添加属性，而是暴露对象，则exports添加的属性将会失效，没有暴露出去

• 通过require获取的是这个唯一对象或者说是module.exports暴露的对象

• 通过解构赋值能得到这个对象的属性

• module.exports只能使用一次，exports可以使用多次

  // 例1：
  
  // 1.js文件内容：
  module.exports.a = {    // 给这个对象添加属性
      a: 1
  }
  exports.b = 2   // 给这个对象添加属性
  
  // 2.js文本内容：
  let total = require("./1.js")
  let {b} = require("./1.js")
  console.log(total,b)
  
  // 输出结果：
  // { a: { a: 1 }, b: 2 } 2     total获得了这个唯一的对象，通过解构{}来获得其中属性
  
  
  // 例2：
  
  // 1.js文件内容：
  module.exports = {  // 直接暴露对象，exports添加的属性失效
      a: 1
  }
  exports.b = 2
  
  // 2.js文本内容：
  let total = require("./1.js")
  let {b} = require("./1.js")
  console.log(total,b)    // 唯一的对象就是module.exports暴露的那个对象，而exports暴露的无法获取，看结果
  
  // 输出结果：
  // { a: 1 } undefined       exports.b = 2这个没有暴露出来，失效了
  

完结

• 只要理解四种暴露方法到底对外暴露了什么，就没什么难的了
• module.exports和exports
  • 对外暴露一个以module.exports为主的对象，可以通过module.exports和exports来对这个唯一暴露对象添加属性
  • 若module.exports不是添加属性而是直接暴露对象，则exports添加的属性将失效，对外无法获取
• export default和export
  • 这个没什么难的，各自暴露对象，export default暴露对象只能通过import获得，export暴露对象只能通过{}获得
• 理解了这个，模块化代码将更具有优势

---

随手点个赞，谢谢大家

---

更多文章 我的github