【前端小卡】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，引入則有大括号”