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

待我称王封你为后i 2021-09-29 06:44 349阅读 0赞

### 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

参考：[https://blog.csdn.net/adley\_app/article/details/80340457][https_blog.csdn.net_adley_app_article_details_80340457]

[https_blog.csdn.net_adley_app_article_details_80340457]: https://blog.csdn.net/adley_app/article/details/80340457