【前端小卡】module.exports、exports、export 、export.default

首先我们要明确一点commonJs(nodejs)和es6写法完全是两种不同的概念，他们没有任何联系

• 首先moudle.exports和exports是commonjs的写法，它的引用方式是通过require
• export和export.default是es6的写法,他们的引用方式是通过import
• 下面简单的讲解他们的用法

1. module.exports、exports

• 用法

//module.exports可以直接赋值
module.exports = {
    hello: hello,
    greet: greet
};
// 不可以直接对exports赋值
exports.hello = hello;
exports.greet = greet;

• 默认情况下，Node准备的exports变量和module.exports变量实际上是同一个变量，并且初始化为空对象{}，即exports是module.exports的引用

exports.foo = function () { return 'foo'; };
exports.bar = function () { return 'bar'; };
//这两个是等价的

• 如果我们要输出的是一个函数或数组，那么，只能给module.exports赋值，给exports赋值是无效的，因为赋值后，module.exports仍然是空对象{}。

2. export 、export.default

• 他们两个记住一点就是应用的区别

export {test}   // 导出
import { test } from '...' // 引入


export.default function () {
    console.log('------')
} // 导出

import test from '....' // 引入

• export default 向外暴露的成员，可以使用任意变量来接收
• 在一个模块中，export default 只允许向外暴露一次
• 在一个模块中，可以同时使用export default 和export 向外暴露成员
• 其实可以记住一个口诀，“导出有default，引入则无大括号{}；导出无default，引入则有大括号”