JavaScript中的 exports, module.exports 和 export export default到底是啥

前端 / 笔记 / 2021-12-22

概述

  • require nodees6 都支持
  • export|export default | import 只有es6支持的导入导出
  • module.exports | exports node独有的导入导出

module.exports 和 exports

在使用前我们先探讨下他们两者之间的关系

test.js

console.log(exports == module.exports)
console.log(exports)
console.log(module.exports)
true
{}
{}

我们惊奇的发现他俩居然是一样的,都是一个空对象

也就是说,一开始他们俩指向同一个内存区域


我们这里以计算器为例

calc.js

function add(n1,n2){
    return n1+n2;
}

function sub(n1,n2){
    return n1-n2;
}

function mul(n1,n2){
    return n1*n2;
}

function div(n1,n2){
    return n1/n2;
}

exports.add = add;
exports.sub = sub;
exports.mul = mul;
exports.div = div;

console.log(module.exports);
console.log(exports);

{
  add: [Function: add],
  sub: [Function: sub],
  mul: [Function: mul],
  div: [Function: div]
}
{
  add: [Function: add],
  sub: [Function: sub],
  mul: [Function: mul],
  div: [Function: div]
}

这时候我们发现 module.exports 和 exports 还是一样的

也就是说exports是module.exports的一个引用

如果这样呢?

// 改变引用
exports=3.14;
// 导出一个数值
module.exports=3.14;

很显然 exports的指向改变了,因此他无法指向 module.exports
但是我们使用 module.exports 直接赋值 则代表导出一个数值。

所以这里要注意

为了避免混淆,我们统一采用module.exports

引入模块

这里的引入分为两种:

  • 完整引入
  • 按需引入

完整引入

calc.js

module.exports.add = function(n1,n2){
    return n1+n2;
}
module.exports.sub =function(n1,n2){
    return n1-n2;
}


test.js

const calc = require("./calc.js")


console.log(calc.add(1,2));
console.log(calc.sub(3,2));

按需引入

const {add} = require("./calc.js")

console.log(add(10,20));

export 和 export default

  • export 按需导出
  • export default 全部导出

export

export function add(n1,n2){
    return n1+n2;
}
export function sub(n1,n2){
    return n1-n2;
}

const {add,sub} = require("./calc.js")


console.log(add(10,20));

console.log(sub(20,10));

export default

export default{
    add(n1,n2){
        return n1+n2;
    },
    sub(n1,n2){
        return n1-n2;
    }
}

const calc =require("./calc.js")

console.log(calc.add(10,20));

console.log(calc.sub(20,10));

总结

  • 如果是node项目,能用module.exports坚决不用exports
  • export 用来导出局部
  • export default 用来导出全部