exports和module.exports,export和 export default的区别--学习小计

362 阅读1分钟

exports和module.exports

exports指向的就是module.exports,我理解为相当于将module.exports对象赋值给变量exports对象。

let exports = module.exports;

可以直接给export对象的属性赋值进行导出。

function outFn(num){
    num++;
    return num;
}

function total(a,b){
    return a+b;
}

exports.test = outFn;
exports.total = total;

注意:只能给exports对象的属性赋值,不能给exports直接赋一个值,这样exports会丢失module.exports的指向,达不到导出的目的,但module.exports可以直接赋值,下面的导出多个方法可以看出来问题。

utils.js:

function outFn(num){
    num++;
    return num;
}
function total(a,b){
    return a+b;
}
exports = {
    outFn,
    total
}

在a.js引入utils.js

let utils = require('./utils.js');
console.log('utils==>',utils);

输出结果:

输出的对象为空

换成module.exports导出:

utils.js:

function outFn(num){
    num++;
    return num;
}
function total(a,b){
    return a+b;
}
module.exports = {
    outFn,
    total
}

在a.js引入utils.js

let utils = require('./utils.js');
console.log('utils==>',utils);

输出结果:

成功引入两个方法

require引入和import引入

exports导出的方法可以用require和import引入:


let utils = retuire('./utils.js');  
//或者写为import引入
import {outFn,total} from './utils.js';  //注意引入的名称要和导出的名称一一对应
//import也可以写成引入完整的module.exports对象
import * as obj from './utils.js';
console.log(obj);  //{outFn,total}

export 和 export default

export 导出的方法可以在import时用{}包裹,并写上需要引入的方法名即可,名字必须和导出的一一对应

//导出
export {
    fn1,
    fn2
}
//export可以多次导出
export {fn1}
export {fn2}

//导入
import {fn1,fn2} from '文件路径'

export default 导出的是一个整体合集,import的时候不能用{}包裹引入单一的方法,而是引入了整个导出的对象。

//导出,export default只能出现一次
export default {
    fn1,
    fn2
}

//导入
import utils from '文件路径'; //utils为{fn1,fn2}

//错误写法
import {fn1,fn2} from '文件路径';  //fn1为undefined