module.exports,exports,export和export default,import與require區別與聯繫

基本問題

module.exports和exports是屬於CommonJS模塊規範，導出模塊！

export和export default是屬於ES6語法，導出模塊！

一樣import和require分別屬於ES6和CommonJS，導入模塊！

module.exports和exports

每個Node.js執行文件，都自動建立2個對象 exports 和 module, module 又有一個屬性 exports, 這個exports 屬性指向一個空對象 {}; 同時 exports這個對象也指向了這個空對象{}。

exports => {} <=module.exports

exports和module.exports指向同一塊內存，但require()返回的是module.exports而不是exports。

var str = "difference"
exports.a = str;
exports.b = function () {
        ////////
}

給 exports 打點添加屬性其實也是給 module.exports 這個空對象打點添加了兩個屬性而已，上面的代碼至關於：

var str = "difference"
module.exports.a = str;
module.exports.b = function () {
        ////////
}

來看下exports和module.exports的使用

使用exports

//app.js

var s = require("./log");
s.log("hello");

//log.js

exports.log =function (str) {
    console.log(str);
}

使用module.exports

//app.js

var s = require("./log");
s.log("hello");

//log.js

module.exports =function (str) {
    console.log(str);
}

上述兩種用法都沒問題，但若是這樣使用

exports = function (str) {
    console.log(str);
}

運行程序就會報錯。

前面的例子中給 exports 打點添加屬性，只是對 exports 指向的內存作了修改。而上例則是對exports指向的內存進行了覆蓋，使exports指向了一塊新的內存，這樣，exports和module.exports指向的內存並非同一塊，exports和module.exports並沒有任何關係。exports指向的內存有了變化，而module.exports指向的內存並沒有變化，仍爲空對象{}。

require獲得的會是一個空對象，則會有

TypeError: s.log is not a function

再看下面的例子

//app.js

var x = require('./init');
console.log(x.a)

//init.js

module.exports = {a: 2}
exports.a = 1

運行app.js會有輸出

2

module.exports經過賦值方式已經和exports對象指向的對象不一樣了，exports對象怎麼改和module.exports對象不要緊了。require()返回的是module.exports而不是exports。

關於exports和module.exports的關係能夠總結爲

• module.exports 初始值爲一個空對象 {}，exports也指向這個空對象
• require() 返回的是 module.exports 而不是 exports

export和export default

模塊功能主要由：export和import構成。export導出模塊的對外接口，import命令導入其餘模塊暴露的接口。

export其實和export default就是寫法上面有點差異，一個是導出一個個單獨接口，一個是默認導出一個總體接口。使用import命令的時候，用戶須要知道所要加載的變量名或函數名，不然沒法加載。這裏就有一個簡單寫法不用去知道有哪些具體的暴露接口名，就用export default命令，爲模塊指定默認輸出。

使用export

// testA.js
var f = 'Miel';
var name = 'Jack';
var data= 1988;

export {f, name, data};

使用export命令定義了模塊的對外接口之後，其餘 JS 文件就能夠經過import命令加載這個模塊。

// main.js
import {f, name, data} from './testA';

使用export default

// export-default.js
export default function () {
  console.log('foo');
}

// 或者寫成

function foo() {
  console.log('foo');
}
export default foo;

// import-default.js
import customName from './export-default';
customName(); // 'foo'

下面比較一下export default和export 輸出。

// 第一組
export default function car() { // 輸出
  // ...
}

import car from 'car'; // 輸入

// 第二組
export function car2() { // 輸出
  // ...
};

import {car2} from 'car2'; // 輸入

能夠看到第一組是使用export default，import語句不須要使用大括號；第二組使用export，對應的import語句須要使用大括號，一個模塊只能有一個默認輸出，因此export default只能使用一次。