module.exports,export和export default的区别

1.module.exports

module变量表示当前的模块,同时该变量是一个对象,module对象会创建一个叫exports的属性,这个属性的默认值是一个空的对象,可以人为为其赋予不同的属性值。

//routes.js
module.exports.Name="";

Tips:在项目中可能存在两种引入module.exports的方式,其根本都是require方式。

     方式1.利用ES6的import方法导入方式require引入router模块

import router from './router'

     方式2.利用CommonJS的模块导入方式require引入router模块,需要使用.default来获取实际的组件选项

var router=require('./routes').default

出现方式2的原因:webpack打包编译时,babel@5及之前的版本可以把export和import转换成node的module.exports和require,但是babel@6版本开始不再把export default转成node的module.exports

eg

export default 'router'
require('./router.js')//{默认值:'router'}
require('./router.js').default//'router'

2.exports和module.exports的关系

Node为每个模块都提供了一个exports变量,指向module.exports。

可以通俗的理解为下式:

var exports=module.exports

但是两者并不完全相等

1.module.exports可以直接导出一个匿名函数或者一个值
module.exports=function(){}
2.exports不可以这样
exports=function(){} 这样写是错的

3.export和export default的区别

export是es6引出的语法,用于导出模块中的变量,对象函数等内容,对应的导入关键字是import

区别:

1.export default在一个模块中最多只能有一个,export可以有多个

2.export default的对象、变量等可以没有名字,export必须有名字

3.export default对应的import和export有一定的区别

1.export的写法

//app.js
var name=".."
var say=function(){}
export{name,say}

//其他页面引入时
import {name,say} from "./app.js"

2.export default
//app.js

(1)export default function(){//可以没有函数名
    return data;
}
(2)const data=12;
    export default data;

//其他页面引入
import data from './app.js'

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值