前言

最近難得有空，決定開始重新規范的學習一下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.jslet a = 100;console.log(module.exports); //能打印出結果為：{}console.log(exports); //能打印出結果為：{}exports.a = 200; //這里辛苦勞作幫 module.exports 的內容給改成 {a : 200}exports = '指向其他內存區'; //這里把exports的指向指走//test.jsvar 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 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的模塊系統非常靈活的。

代碼地址

GitHub: https://github.com/XuXiaoGH/exportImportTest

本地下載：http://xiazai.VeVB.COm/201710/yuanma/exportImportTest(VeVB.COm).rar

參考文獻

1.老樹新芽，在ES6下使用Express

2.exports 和 module.exports 的區別
3.module.exports與exports,export與export default之間的關系

感謝這三位前輩的分享。

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。