一、使用
Require: node 和 es6
export，export default ，import : es6
module.exports ，exports : node
二、node的module
node中遵循的是commonJs规范。
CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。
（1）exports
- exports使用方法
function sayHi() {
console.log('hi');
}
exports.sayHi = sayHi;
引入
let sayHiModule = require('./test.js');
console.log(sayHiModule);
// { sayHi: [Function: sayHi] }
（2）module.exports
- module.exports使用方法
function sayHi() {
console.log('hi');
}
module.exports = sayHi;
引入
let sayHiModule = require('./test.js');
console.log(sayHiModule);
// function sayHi() {
// console.log('hi');
// }
（3）对比现象
a) 使用exports时，打印出module.exports和exports，二者是相等的
function sayHi() {
console.log('hi');
}
exports.sayHi = sayHi;
console.log(module.exports);
// { sayHi: [Function: sayHi] }
console.log(exports);
// { sayHi: [Function: sayHi] }
console.log(module.exports === exports);
// true
b) 使用module.exports时，打印出module.exports和exports，二者居然又不相等了
function sayHi() {
console.log('hi');
}
module.exports = sayHi;
console.log(module.exports);
// [Function: sayHi]
console.log(exports);
// {}
console.log(module.exports === exports);
// false
（4）原因
a) Node为每个模块提供一个exports变量，指向module.exports。这等同在每个模块头部，有一行这样的命令。
var exports = module.exports;
也就意味着，他俩指向同一个内存区域。
b) 什么也不做， 先打印出module.exports和exports，会发现他俩都是空对象。
console.log(module.exports);
// {}
console.log(exports);
// {}
所以（3）中的 a) exports. sayHi=sayHi使这个空对象多了个sayHi的属性。
而（3）中的 b) module.exports = sayHi;使得module.exports的内存指向了另一个内存区域，所以module.exports变了，而exports还是那个空对象。
（5）require
那么require到底用的是哪个？
其实从上面使用方法的例子里也能看出来，require引的是module.exports指向的那块内存。
看文档发现require居然还根据路径缓存，见下面的栗子
let sayHiModule = require('./test.js');
let sayHiModule2 = require('./test.js').name = 'Jack';
console.log(sayHiModule);
// { sayHi: [Function: sayHi], name: 'Jack' }
三、es6的module
上面提到，commonJs的module是一个对象，运行时加载。
而es6的module不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入，在编译时就完成模块加载。
（1）export
下面2种写法等价。
// profile.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;
// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export { firstName, lastName, year };
export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。（所以export后必须加上大括号）
（2）import
同样import也要对应上export的对外接口。
// main.js
import { firstName, lastName, year } from './profile.js';
由于是静态加载，必须在最外层，不能条件加载。
（3）export default
export default可以用来解决接口名一一对应的麻烦。
// 第一组
export default function crc32() { // 输出
// ...
}
import crc32 from 'crc32'; // 输入
// 第二组
export function crc32() { // 输出
// ...
};
import {crc32} from 'crc32'; // 输入
上面的栗子，用了export default，import的时候就可以直接命名，而不需要用{}去对应上export的接口。
export default其实是输出了一个叫default的变量，所以export default不能接变量声明语句。
四、babel将es6模块转为commonJs规范
贴一个小网站，大家可以自己试试。
（1）export default
// es6
export default function() {
console.log('hi');
}
// 转完
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = _default;
function _default() {
console.log('hi');
}
（2）export
// es6
let a = 'hi';
export {a};
// 转完
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.a = void 0;
let a = 'hi';
exports.a = a;
（3）import
// es6
import a from 'a';
// 转完
"use strict";
var _a = _interopRequireDefault(require("a"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
（4）结论
a）对于导出：
babel会把export {a} 变成 exports.a = .....;
把export default 变成 exports.default = ....;
并把exports.__esModule 变成 true，表明它是从es6转成commonJs的。
b）对于引入
import a from 'a'
这句本意上是引入a导出对象的default属性。
而转换后var a = require(./a.js)得到的却是整个对象
所以babel有个_interopRequireDefault函数，其实说白了就是个if else：
如果有__esModule，代表obj本来就是从es6转成commonJs的，直接返回obj；
如果没有__esModule，代表obj本来就是commonJs规范，所以要给它包一层default。
（5）babel的按需引入插件做了什么（babel-plugin-component）
a）没有按需的情况下，引入一个button，转成commonJs其实就把库全部引入了
// es6
import {Button} from 'element-ui';
// babel转完
"use strict";
var _elementUi = require("element-ui");
b）加上babel-plugin-component之后，按官方给的用法如下
// babel配置
plugins: [
[
'component',
{
libraryName: 'element-ui',
styleLibraryName: 'theme-chalk'
}
],
]
插件就会把
import { Button } from 'components'
转成
var button = require('components/lib/button')
require('components/lib/styleLibraryName/button.css')
这样就达到了按需引入。
五、webpack模块化做了什么
戳这里
参考
终于讲清楚了nodejs中exports和module.exports的区别
网友评论