exports、module.exports和export、export default到底是咋回事，区别在哪里

Node模块

Node里面的模块系统遵循的是CommonJS规范。

CommonJS定义的模块分为：

1、模块标识(module)
2、模块定义(exports)
3、模块引用(require)

先解释 exports 和 module.exports

在一个node执行一个文件时，会给这个文件内生成一个 exports和module对象， 而module又有一个exports属性。他们之间的关系如下图，都指向一块{}内存区域。

exports = module.exports = {};

接下来上代码：

//utils.js
let test = 'today';

console.log(module.exports); //能打印出结果为：{}
console.log(exports); //能打印出结果为：{}

exports.test = 'tomorrow'; //这里辛苦劳作帮 module.exports 的内容给改成 {test: 'tomorrow'}

exports = '指向其他内存区'; //然后在这里把exports的指向指到其他地方

//test.js

let _test = require('/utils');
console.log(_test) // 打印为 {test: 'tomorrow'} 

　　

1、由此可见，require导出的内容其实是module.exports的指向的内存块内容（{test: 'tomorrow'}），并不是exports的内容（'指向其他内存区'）。
2、简而言之，区分他们之间的区别就是 exports 只是 module.exports的引用，exports是辅助module.exports操作内存中的数据用的，结果到最后真正被require出去的内容还是module.exports的。

为了避免糊涂，尽量都用 module.exports 导出，然后用require导入

ES中的模块导入和导出

先解释 export 和 export default

1、export与export default均可用于导出常量、函数、文件、模块等
2、在一个文件或模块中，export、import可以有多个，export default仅有一个
3、通过export方式导出，在导入时要加{ }，export default则不需要
4、export能直接导出变量表达式，export default不行。

例如下面代码：
1、export （testExport.js）

'use strict'

//导出常量
export const a = '100';  

 //导出函数方法
export const foo = function(){ 
    console.log('This is a function foo');
}

 //导出方法第二种
function bar(){
   console.log('My name is bar'); 
}
export { bar };

// 相应的导入的方式为

import { foo, bar } from './testExport';
//导出了 export 方法 
foo(); // 直接执行foo方法
bar(); // 直接执行bar方法

　　

2、export default （testExportDefault.js）

'use strict'
//export default导出
const b = 100;
export const foo = function(){ 
    console.log('This is a function foo');
}
export default b
//  也可以只导出一个对象
//  export default {b, foo};   

//export defult const b = 100;// 这里不能写这种格式,是错误的，可以导出一个对象， export default {b}。

　　

综合应用：

//index.js

'use strict'
var express = require('express');
var router = express.Router();

import { foo, too } from './testExport'; //导出了 export 方法 
import b from './testExportDefault';  //导出了 export default 

import * as testExportModule from './testExportDefault'; //as 集合成对象导出

import * as testExportDefaultModule from './testExportDefault'; //as 集合成对象导出

  foo();
  bar();
  testExportModule.foo();
  console.log(b);
  console.log(testExportDefaultModule.b); // undefined , 因为  as 导出是 把 零散的 export 聚集在一起作为一个对象，而export default 是导出为 default属性。
  console.log(testExportDefaultModule.default); // 100 or {b: 100, foo: function}

 module.exports = router; 

　

补充一下模块化标准规范

1、模块化的最佳实践

node.js 环境中，遵循 CommonJS 规范
浏览器环境中，遵循 ES Modules 规范

1.1、ES Modules 基本特性

自动采用严格模式，忽略 'use strict'
每个 ESM 模块都是单的私有作用域
ESM 是通过 CORS 去请求外部 JS 模块的
ESM 的 script 标签会延迟执行脚本

ES Modules 注意事项

• export {} 这是一个固定的语法，不是 es6 中的对象简写
• import {} 这是一个固定的语法，不是 es6 中的对象解构
• 导出得到的是对值的引用，模块内部修改了值外部也会跟着改变
• 导入的成员是只读的成员

1.2、ES Modules 导出和导入

• export 注意有无 default 关键字
• 不能省略文件后缀名，不能省略 ./
• 执行某个模块，不需要提取模块中的成员 import './module.js'
• 动态导入模块，可以用全局函数 import()

1.3、ES Modules in Node.js 支持情况：

• 执行文件时，node --experimental-modules index.mjs
• ES Module 中可以导入 CommonJS 模块
• CommonJS 中不能导入 ES Module 模块
• CommonJS 始终只会导出一个默认成员
• 注意 import 不是解构导出对象

ES6 模块和 CommonJS 的差异点：

• CommonJS 可以在运行时使用变量进行 require, 例如 require(path.join('xxxx', 'xxx.js')),CommonJS 模块是运行时加载，而静态 import 语法（还有动态 import，返回 Promise）不行，因为 ES6模块是编译时输出接口, 模块会先解析所有模块再执行代码。
• require 会将完整的 exports 对象引入,CommonJS输出的是一个值的拷贝，import 可以只 import 部分必要的内容,ES6 模块输出的是值的引用，这也是为什么使用 Tree Shaking 时必须使用 ES6 模块 的写法。
• import 另一个模块没有 export 的变量，在代码执行前就会报错，而 CommonJS 是在模块运行时才报错。
• 因为CommonJS的require语法是同步的，所以就导致了CommonJS模块规范只适合用在服务端，而ES6模块无论是在浏览器端还是服务端都是可以使用的，但是在服务端中，还需要遵循一些特殊的规则才能使用 ；
• 因为两个模块加载机制的不同，所以在对待循环加载的时候，它们会有不同的表现。CommonJS遇到循环依赖的时候，只会输出已经执行的部分，后续的输出或者变化，是不会影响已经输出的变量。而ES6模块相反，使用import加载一个变量，变量不会被缓存，真正取值的时候就能取到最终的值；
• 关于模块顶层的this指向问题，在CommonJS顶层，this指向当前模块；而在ES6模块中，this指向undefined；
• 关于两个模块互相引用的问题，在ES6模块当中，是支持加载CommonJS模块的。但是反过来，CommonJS并不能requireES6模块，在NodeJS中，两种模块方案是分开处理的。

为什么平时开发可以混写？

面提到 ES6 模块和 CommonJS 模块有很大差异，不能直接混着写。这和开发中表现是不一样的，原因是开发中写的 ES6 模块最终都会被打包工具处理成 CommonJS 模块，以便兼容更多环境，同时也能和当前社区普通的 CommonJS 模块融合。

循环加载（circular dependency）

1、CommonJS的循环加载

想要搞清楚CommonJS的循环加载问题，首先我们要先大概了解下它的加载原理。CommonJS的一个模块，一般就是一个文件，使用reqiure第一次加载一个模块的时候，就会在内存中生成一个对象。

{
  id: '...',
  exports: { ... },
  loaded: true,
  ...
}

CommonJS模块的特性就是加载时执行，当脚本被reqiure的时候，就会全部执行。一旦出现某个模块被"循环加载"，就只输出已经执行的部分，还未执行的部分不会输出。

// a.js
exports.done = false;
// 首先输出一个done变量({done:false})，然后开始加载b.js,等待b.js执行完，才会继续执行后面的代码
var b = require('./b.js');
console.log('在 a.js 之中，b.done = %j', b.done);
exports.done = true;
console.log('a.js 执行完毕');
// b.js
exports.done = false;
var a = require('./a.js'); //此时a里面只有 {done:false}
console.log('在 b.js 之中，a.done = %j', a.done);
exports.done = true;
console.log('b.js 执行完毕');
// main.js
var a = require('./a.js');
var b = require('./b.js');
console.log('在 main.js 之中, a.done=%j, b.done=%j', a.done, b.done);

　　

最后执行结果：

在 b.js 之中，a.done = false
b.js 执行完毕
在 a.js 之中，b.done = true
a.js 执行完毕
在 main.js 之中, a.done=true, b.done=true

2、ES6中的循环加载

ES6 模块是动态引用，如果使用import加载一个变量，变量不会被缓存，真正取值的时候就能取到最终的值

// even.js
import { odd } from './odd'
export var counter = 0;
export function even(n) {
  counter++;
  return n === 0 || odd(n - 1);
}
// even.js里面的函数even有一个参数n，只要不等于 0，就会减去 1，传入加载的odd()。odd.js也会做类似操作。

// odd.js
import { even } from './even';
export function odd(n) {
  return n !== 0 && even(n - 1);
}
// 参数n从 10 变为 0 的过程中，even()一共会执行 6 次，所以变量counter等于 6
> import * as m from './even.js';
> m.even(10);
true
> m.counter
6