参考链接：https://juejin.cn/post/6896397110078504973#heading-7

一、module.exports和exports，export和export default的区别

1.module.exports

module变量代表当前模块。这个变量是一个对象，module对象会创建一个叫exports的属性，这个属性的默认值是一个空的对象；

  1. module.exports = {}

例子：app.js

  1. module.exports.Name="我是电脑"；
  2. module.exports.Say=function(){
  3.   console.log("我可以干任何事情")；  
  4. }
  7. //上边这段代码就相当于一个对象
  9. {
  10.   "Name":" 我是电脑"，
  11.   "Say"    :function(){
  12.          　　console.log("我可以干任何事情")；  
  13.      　　　}
  14. }

require方法用于加载模块

  1. var req=require("./app.js");
  3. req.Name      //这个值是 "我是电脑"
  4. req.Say()      //这个是直接调用Say方法，打印出来 "我可以干任何事情"

2.exports与module.exports的关系

Node为每个模块提供一个exports变量，指向module.exports.可以通俗理解为：

  1. var exports = module.exports;
  3. //两个是相等的关系，但又不是绝对相当的关系
  4. 例如：
  5. 1.module.exports可以直接导出一个匿名函数或者一个值
  6. module.exports=function(){
  7.   var a="Hello World"  
  8.   return   a;
  9. }
  10. 但是exports是不可以的，因为这样等于切断了exports与module.exports的联系。
  11. exports=function(){           //这样写法是错误的
  12.   var a="Hello World"        //这样写法是错误的
  13.   return   a;                //这样写法是错误的
  14. }                            //这样写法是错误的

3.export和export default的区别

export是es6引入的语法，用于导出模块中的变量，对象，函数，类。对应的导入关键字是import。
二者的区别有以下几点：

  • export default在一个模块中只能有一个，当然也可以没有。export在一个模块中可以有多个。
  • export default导出的对象、变量、函数、类，可以没有名字。export的必须有名字。
  • export default和export对应的import也有区别 ```javascript 1.export写法 //./aap.js var name=”我是电脑”； var say=function(){ console.log(“我可以干很多事”)； }

export {name，say}；

//也可以直接一个一个的export但是必须得有名字 export const a=1； export function data(){ 　　return data; }

//其他页面引入时必须这样 import {name，say} from “./app.js”

2.export default //app.js //可以没有函数名字 export default function(){ 　　return data; } //这里export不能这样导出

export default const a=12； //应该这样导出 const a=12；

export default a

//其他页面引入时必须这样 import data from “./app.js”

  2. <a name="tOkU5"></a>
  3. ### 4.总结

modules.exports和exports相差不大，但module.exports能导出匿名函数，exports不能。 module.exports和require成对使用；export和import成对使用。 export default一个模块只能有一个，export一个模块可以有多个 export default导出的内容可以用import … from “xx”直接导入 export导出的内容必须import {名字} from “xx”来导入 不论是require导入还是import导入，都最好写相对路径

  2. <a name="N2yKw"></a>
  3. ## 二、使用与区别
  4. <a name="zZJY7"></a>
  5. ### 使用
  6. commonJS早于ES6 module出现，所以node采用的是commonJS模块化标准；<br />commonJS
  7. ```javascript
  8. // 导出
  9. module.exports = {}        // 方式一
  10. exports.xxx = xxx            // 方式二
  11. // 引入require
  12. let obj = require('xx/xx')
  13. let xxx = require('').xxx

es6 module

  1. // 导出
  2. export default {}    // 方式一
  3. export const xxx = ''    // 方式二
  4. // 引入
  5. import xxx from '';
  6. import {xxx} from '';

区别

两者主要区别有以下两点：
1、对于模块的依赖，CommonJS是动态的，ES6 Module是静态的

动态是指对于模块的依赖关系建立在代码执行阶段； 静态是指对于模块的依赖关系建立在代码编译

2、CommonJS导入是值的拷贝，ES6 Module导入是值的引用
commonJS导入导出

  1. // B.js
  2. let count = 3
  4. function change() {
  5.     count ++    // 变量count + 1
  6.     console.log('原count值为：', count);  // 打印B.js模块中count的值
  7. }
  9. module.exports = {
  10.     count,
  11.     change
  12. }
  14. // A.js
  15. let count = require('./B.js').count 
  16. let change = require('./B.js').change
  18. console.log('改变前：', count);   
  19. change()     // 调用模块B.js中的change方法，将原来的count + 1
  20. console.log('改变后：', count); 
  22. // 运行A.js文件的结果
  23. 改变前：3
  24. 原count值为：4
  25. 改变后：3

ES6 Module导入导出

  1. // B.js
  2. let count = 3
  4. function change() {
  5.     count ++        // 变量count + 1
  6.     console.log(count);   // 打印B.js模块中count的值
  7. }
  9. export {count, change}
  11. // A.js
  12. import {count, change} from './B.js';
  14. console.log('改变前：',count);
  16. change()         // 调用模块B.js中的change方法，将原来的count + 1
  18. console.log('改变后：', count);
  20. // 运行A.js文件的结果
  21. 改变前：3
  22. 原count值为：4
  23. 改变后：4

可以看出，es6导入是值的引用；CommonJS是值的拷贝