module.exports和exports 与 export和export default的区别,import和require的区别

module.exports 和 exports 的区别

在学习Node.js时，经常能看到两种导出模块的方式：module.exports和exports。

穿插一个必备小知识：在文件a.js中用exports或module.exports导出的对象（方法、变量），可以在另一个文件b.js中通过require(’./a’)引用。

module和exports是Node.js给每个js文件内置的两个对象。
可以通过console.log(module) 和 console.log(exports)打印出来。
如果你在main.js中写入下面两行，然后运行 $ node main.js:

console.log(exports);//输出：{}
console.log(module);//输出：Module {..., exports: {}, ...} （注：...代表省略了其他一些属性）

从打印我们可以看出，module.exports 和 exports一开始都是一个空对象{}，实际上，这两个对象指向同一块内存。这也就是说module.exports 和 exports是等价的（有个前提：不去改变它们指向的内存地址）。

例如：exports.age = 18 和 module.export.age = 18，这两种写法是一致的（都相当于给最初的空对象{}添加了一个属性，通过require得到的就是{age: 18}）。

但是
require引入的对象本质上是module.exports。这就产生了一个问题，当 module.exports和exports指向的不是同一块内存时，exports的内容就会失效。

module.exports = {name: '萤火虫叔叔'}；
exports = {name: '萤火虫老阿姨'}

1. 此时module.exports指向了一块新的内存（该内存的内容为{name: 萤火虫叔叔’}），
2. exports指向了另一块新的内存（该内存的内容为{name: ‘萤火虫老阿姨’}）。
3. require得到的是{name: ‘萤火虫叔叔’}。

附上代码（在main.js中引入people.js）：

//people.js
module.exports = {name: '萤火虫叔叔'}；
exports = {name: '萤火虫老阿姨'};

//main.js
let people = require('./people');
console.log(people);//输出：{name: '萤火虫叔叔'}

export 和 export default 的区别

在es5中，用module.exports和exports导出模块，用require引入模块。

es6新增export和export default导出模块，import导入模块。

一、在es6中的两种基本用法

新建两个文件：a.js, b.js。

1. a.js用于导出模块
2. b.js用于导入模块
3. 两个文件放在同一目录下。

一、 第一种用法

export default导出：

//a.js
const Programmer = {name: 'UncleFirefly',age:25}
export default Programmer

export default导出对应的导入：

//b.js
import Programmer from './a.js'

二、 第二种用法

export导出：

//a.js
const uncle = {name: 'UncleFirefly',age:25}
const aunt = {name: 'AuntFirefly',age:25}
export {uncle, aunt}

export default导出对应的导入：

//b.js
import {uncle, aunt} from './a.js'

二、区别

可以在a.js中打印出module，通过打印的内容找到4种导出模块的区别。

exports和module.exports的区别

查看exports和module.exports的区别请移步第一段内容

export和export default的区别

//a.js
const Programmer = {name: 'UncleFirefly',age:25}
export default Programmer
console.log(module)
/*
//打印结果
{exports: {default:{age:25,name:'UncleFirefly'}, hot:{...}}
*/

//a.js
const uncle = {name: 'UncleFirefly',age:25}
const aunt = {name: 'AuntFirefly',age:25}
export {uncle, aunt}
/*
//打印结果
{exports: {aunt:{age:25,name:'AuntFirefly'},uncle:{age:25,name:'UncleFirefly'}, hot:{...}}
*/

从打印可以看出:

• 导出时

  • export相当于把对象添加到module的exports中。
  • export default相当于把对象添加到module的exports中，并且对象的key叫default。

• 导入时：

  • 不带{}的导入
  • 本质上就是导入exports中的default属性（注：如果default属性不存在，则导入exports对象）。
  • 带{}的导入
  • 本质上按照属性key值导入exports中对应的属性值。

三、小tips

一般来说，module.exports、exports与require对应。也就是用module.exports、exports导出的模块，则用require导入。（不是绝对，如果代码支持es6，也可以用import引入）。

四、注意

1. import只有webpack的编译才支持,
2. require()这种方式只有node端才用
3. 你经常会看到一些webpack配置js能看到module.exports这个对象就是这样,就是用了require