exports与module.exports，export与export default 使用及其区别-蒲公英云

exports与module.exports，export与export default 使用及其区别

exports 与 module.exports

var cel = function(){ 
    console.log('cel')
}
var el = 20
exports.cel = cel
exports.el = el
module.exports.el = 15
module.exports = {  //在es6中当 key和value 一样的时候可以只写一个，为了更清晰我就不简写了
    cel: cel,
    el: el
}
console.log(exports)
console.log('********---------*********')
console.log(module.exports)
console.log('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx')
console.log(exports)
console.log(module)

输出为：

{  cel: [Function: cel], el: 15 }  
// 这里exports 的el属性值被 module.exports.el = 15 修改了 可以看出exports是module的一个属性
********---------*********
{  cel: [Function: cel], el: 20 } // 这里module.exports 的el属性值重新赋值了，值为20
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
{  cel: [Function: cel], el: 15 } // 这里exports输出
Module {   // 这里module.exports 输出
  id: '.',
  exports: {  cel: [Function: cel], el: 20 },
  parent: null,
  filename: 'e:\\accumulate\\node\\ycode\\tempCodeRunnerFile.js',
  loaded: false,
  children: [],
  paths:
   [ 'e:\\accumulate\\node\\ycode\\node_modules',
     'e:\\accumulate\\node\\node_modules',
     'e:\\accumulate\\node_modules',
     'e:\\node_modules' ] }

综合上面的例子可以看出来：

默认 exports 和 module.exports 是指向同一块内存的。
exports 是 module 的一个属性。
module.exports 导出的是整个模块， exports 导出的是一个对象。

注意：如果直接给exports 赋值则会切断与module.exports之间的联系。
例如：

// a.js
var el = 20
exports = {  el: el }
// b.js
var a = require('./a')
console.log(a)  // {}

可见 exports = { // *** } 不会导出任何东西。

export 与 export default

es6的导出和导入就比较好理解了。
使用：

// a.js
export let cel = 20  
export let cy = ()=>{ 
        console.log(521)
    }
    /* 可以再每个需要导出的变量函数或者对象前面加上export导出， * 还可以使用 export { cel, cy }进行导出 注意这里没有等号， * 这两种导出方法对应的导入方法是一样的都是 import {cel, cy} from './a.js' */ 
// b.js
import { cel, cy} from './a.js'
cy() // 521

export default 和 export 都可以用于导出常量，函数，文件，模块等。
通过export 方式导出，在导入时要加{} ，export default 则不需要
通过export 方式导出，在导入时要加{} 并且要使用导出时的函数或者对象名。
同一个模块中 export 可以存在多个，export default 仅能存在一个。
用 export default 导出的对象时不一定使用导出时的名字。因为这种方式实际上是将该导出对象设置为默认导出对象，完全可以重新命名。看下面的例子

// a.js

const cel = {
```
name: '小明',
age: '20'
```
}

export default cel

// b.js
import cyq from ‘./a.js’
console.log(cyq.age) // 20