NodeJS的exports、module.exports與ES6的export、export default深刻詳解

前言

決定開始從新規範的學習一下node編程。可是引入模塊我看到用 require的方式，再聯想到我們的ES6各類export 、export default。

阿西吧，頭都大了....

頭大完了，那咱們坐下先理理他們的使用範圍。

• require: node 和 es6 都支持的引入
• export / import : 只有es6 支持的導出引入
• module.exports / exports: 只有 node 支持的導出

這一刻起，我以爲是時候要把它們之間的關係都給捋清楚了，否則我得混亂死。話很少少，我們開幹！！

node模塊

Node裏面的模塊系統遵循的是CommonJS規範。

那問題又來了，什麼是CommonJS規範呢？

因爲js之前比較混亂，各寫各的代碼，沒有一個模塊的概念，而這個規範出來其實就是對模塊的一個定義。

CommonJS定義的模塊分爲: 模塊標識(module)、模塊定義(exports) 、模塊引用(require)

先解釋 exports 和 module.exports

在一個node執行一個文件時，會給這個文件內生成一個 exports和module對象，

而module又有一個exports屬性。他們之間的關係以下圖，都指向一塊{}內存區域。

exports = module.exports = {};

那下面咱們來看看代碼的吧。

//utils.js
let a = 100;
 
console.log(module.exports); //能打印出結果爲：{}
console.log(exports); //能打印出結果爲：{}
 
exports.a = 200; //這裏辛苦勞做幫 module.exports 的內容給改爲 {a : 200}
 
exports = '指向其餘內存區'; //這裏把exports的指向指走
 
//test.js
 
var a = require('/utils');
console.log(a) // 打印爲 {a : 200}

從上面能夠看出，其實require導出的內容是module.exports的指向的內存塊內容，並非exports的。

簡而言之，區分他們之間的區別就是 exports 只是 module.exports的引用，輔助後者添加內容用的。

用白話講就是，exports只輔助module.exports操做內存中的數據，辛辛苦苦各類操做數據完，累得要死，結果到最後真正被require出去的內容仍是module.exports的，真是好苦逼啊。

其實你們用內存塊的概念去理解，就會很清楚了。

而後呢，爲了不糊塗，儘可能都用 module.exports 導出，而後用require導入。

ES中的模塊導出導入

說實話，在es中的模塊，就很是清晰了。不過也有一些細節的東西須要搞清楚。

好比 export 和 export default，還有 導入的時候，import a from ..,import {a} from ..，總之也有點亂，那麼下面咱們就開始把它們捋清楚吧。

export 和 export default

首先咱們講這兩個導出，下面咱們講講它們的區別

• export與export default都可用於導出常量、函數、文件、模塊等
• 在一個文件或模塊中，export、import能夠有多個，export default僅有一個
• 經過export方式導出，在導入時要加{ }，export default則不須要
• export能直接導出變量表達式，export default不行。

下面我們看看代碼去驗證一下

testEs6Export.js

'use strict'
//導出變量
export const a = '100'; 
 
 //導出方法
export const dogSay = function(){ 
 console.log('wang wang');
}
 
 //導出方法第二種
function catSay(){
 console.log('miao miao'); 
}
export { catSay };
 
//export default導出
const m = 100;
export default m; 
//export defult const m = 100;// 這裏不能寫這種格式。

index.js

//index.js
'use strict'
var express = require('express');
var router = express.Router();
 
import { dogSay, catSay } from './testEs6Export'; //導出了 export 方法 
import m from './testEs6Export'; //導出了 export default （這裏的m能夠命名成其餘名字，都能獲取到default定義的東西）
 
import * as testModule from './testEs6Export'; //as 集合成對象導出

 /* GET home page. */
router.get('/', function(req, res, next) {
 dogSay();
 catSay();
 console.log(m);
 testModule.dogSay();
 console.log(testModule.m); // undefined , 由於 as 導出是 把 零散的 export 彙集在一塊兒做爲一個對象，而export default 是導出爲 default屬性。
 console.log(testModule.default); // 100
 res.send('恭喜你，成功驗證');
});
 
module.exports = router;

從上面能夠看出，確實感受 ES6的模塊系統很是靈活的。