第6题- module.exports、exports、export三者的区别

面试题目：

module.exports、exports、export 三者的区别是什么？

答案解析：

模块化进程

想要了解三者的区别，须要了解下他们产生的背景。

之前JS自己没有模块化的概念和相关API，开发者通常都是在html中引入多个script标签，业务逻辑复杂时，就会带来不少问题，好比：

1. 全局做用域下容易形成变量冲突
2. 文件只能按照script的书写顺序进行加载
3. 开发人员必须主观解决模块和代码库的依赖关系
4. 在大型项目中各类资源难以管理，长期积累的问题致使代码库混乱不堪

2009年 Node.js出现，node里面的模块系统遵循的是CommonJS规范

CommonJS定义的模块分为: 模块标识(module)、模块定义(exports) 、模块引用(require)

CommonJS是主要为了JS在后端的表现制定的，是不适合前端的 ，因此出现了AMD、CMD、UMD等等一系列能够在浏览器等终端实现的异步加载的模块化方案，咱们最熟悉的require.js就是AMD的产物，seajs是CMD的产物。

exports和module.exports

1. node中一个文件被认为是一个模块，执行时会给文件内生成exports和module两个对象，module对象内部会建立一个exports属性。
2. 二者间的关系能够认为是 exports = module.exports = {};

一个node模块，咱们能够认为首行定义了exports和module.exports两个对象：

// module1.js

let a = 2;
let add = function () {
    a++;
}
console.log(module.exports); //能打印出结果为：{}
console.log(exports); //能打印出结果为：{}


// module1.js 可改写为以下代码
var exports = module.exports = {};
let a = 2;
let add = function () {
    a++;
}
console.log(module.exports); //能打印出结果为：{}
console.log(exports); //能打印出结果为：{}

复制代码

既然exports和module.exports两个对象指向同一个对象，require导入的是谁呢？一块儿看下下面代码

// test.js

module.exports = {
    a: 100
}
exports = {
    a: 200
}

// app.js
let test = require('./test');
console.log(test); // 打印为 {a : 100}

复制代码

从上面可知，require导出的内容是module.exports的指向的内存块内容，并非exports的。

ES6中的模块导出 export

export 是ES6中的导出，与它对应的导入是 import，常见的还有一个export default 下面咱们讲讲两者的区别

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

总结

综上可知：

1. export / import： 是ES6中的导入导出。
2. module.exports / exports: 只有 node 支持的导出，两者指向同一个对象。与他们对应的导入是require，模块最终导入的是module.exports对象。

目前的浏览器几乎都不支持 ES6 的模块机制，因此咱们要用 Babel 把 ES6 的模块机制转换成 CommonJS 的形式，而后使用 Browserify 或者 Webpack 这样的打包工具把他们打包起来。达到模块化加载效果相似于 seajs代码

---

扫一扫 关注个人公众号【前端名狮】，更多精彩内容陪伴你！