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

概述

require node 和 es6 都支持
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 用来导出全部