學了JS并且用過Node.js后，對模塊化應該是有所了解和使用了，那么一定見過以下兩種模塊匯入匯出的方式

第一種： ES6 Module

// B.js
function show() {
	console.log('show方法被執行')
}

export default show

// A.js
import show from './B.js'
show()  // show方法被執行

第二種： CommonJS

// B.js
function show() {
	console.log('show方法被執行')
}

module.exports = {
	show
}

// A.js
const bModule = require('./B.js')

bModule.show()  // show方法被執行

以上兩種匯入匯出方法涉及到了兩種模塊規范，分別是ES6 Module 、CommonJS

本文就來聊聊這兩者之間的具體使用與區別

• 公眾號：前端印象
• 不定時有送書活動，記得關注~
• 關注后回復對應文字領取：【面試題】、【前端必看電子書】、【資料結構與演算法完整代碼】、【前端技術交流群】

1. CommonJS

CommonJS是2009年由JavaScript社區提出的包含了模塊化的一個標準，后來被Node.js所采用并實作，也就是說我們在Node.js中用到的模塊匯入匯出都是依照CommonJS標準來實作的

1.1 匯出

我們可以把一個檔案看成一個模塊，每個模塊之間是互相獨立的，即不會互相影響，當需要使用到某個模塊時，只需在檔案中將目標模塊匯入即可

要想被其它模塊匯入首先需要匯出需要向外暴露的變數或方法，在CommonJS中匯出的語法有以下兩種方式

// B.js
// 定義了函式show
function show() {
	console.log('show方法被呼叫')
}

// 定義了變數count
let count = 3

/*--------------  匯出方法  --------------*/

// 第一種
module.exports = {
	show,
	count
}

// 第二種
exports.show = show
exports.count = count

上述代碼中，兩種匯出方式是等價的，

第一種匯出方式是將需要匯出的函式或變數存盤到 module.exports 里面，其中 module.exports 原本是一個空物件

第二種匯出方式中，exports 在內部其實是指向了 module.exports，所以當我們執行 exports.變數 或 exports.函式 時，其實就相當于把變數或函式存盤到 module.exports 中

注意： 這里要特別強調的是，在使用第二種匯出方式時，不能對 exports 進行重新賦值，否則就將 module.exports 直接全部覆寫了

1.2 匯入

再來看一下CommonJS的匯入語法

// A.js
const bModule = require('./B.js')

console.log(bModule.count)  // 3

bModule.show()  // show方法被呼叫

從上述代碼中可以看到，CommonJS是通過 require 方法來匯入模塊的，其引數為模塊檔案路徑，要特別注意的是，我們匯入模塊后接收到的其實是一個物件，也就是 module.exports 的值，我們能從該物件中獲取到所需的變數或函式

另外，比較特別的是，require 方法還可以接收一個運算式作為引數，代碼如下

let fileName = 'B.js'
const bModule = require('./' + fileName)

因此，我們是可以動態的改變并決定模塊的加載匯入路徑的

2. ES6 Module

如標題名寫的，該模塊標準是在ES6時才被提出的，此后JS才具有了模塊化這一特性

2.1 匯出

在ES6 Module 中，匯出用到了關鍵字 export ，匯出的方式也大致分為兩種，分別是命名匯出 、默認匯出

第一種： 命名匯出

// B.js
/*--------  單個變數或函式匯出  ----------*/
export function show() { console.log('show方法被呼叫') }

export let count = 3

/*--------  批量匯出  ----------*/
function show() { console.log('show方法被呼叫') }

let count = 3

export {show, count}

上述代碼分了兩種情況，且這兩種寫法是等價的

第一種是單個的變數或函式匯出，只需要直接在開頭使用 export 關鍵字即可；

第二種情況是批量地把多個變數或函式匯出，只需要把它們儲存到一個物件中即可

第二種： 默認匯出

// B.js
function show() { console.log('show方法被呼叫') }

// 命名匯出變數count
export let count = 3

// 默認匯出函式show
export default show

默認匯出是在 export 關鍵詞后面再跟上一個 default 表示匯出的該變數或函式是匿名的

注意： 一個模塊只能默認匯出一次，否則就會報錯，具體原因會在后面講解

2.2 匯入

ES6 Module 的匯入用到的關鍵字是 import ，具體代碼如下

// A.js
import {show, count} from './B.js'

show()   // show方法被呼叫

console.log(count)  // 3

ES6 Module的匯入需要用一對 {} 大括號來接收我們需要匯入的方法或函式

注意： 大括號中的變數或函式名必須與匯出時的名稱一模一樣

那么如果我們想修改匯入的變數或函式的名稱，可以通過 as 關鍵詞來命名，代碼如下

// A.js
import {show as print, count as number} from './B.js'

print()   // show方法被呼叫

console.log(number)  // 3

如果我們要想將所有的變數或函式都匯入，可以通過 * 來整體匯入，代碼如下

import * as bModule from './B.js'

bModule.show()  // show方法被呼叫

console.log(bModule.count)  // 3

* 表示全部的意思，我們將其全部匯入，并賦值給 bModule，這樣我們就可以通過 bModule 獲取想要的變數或物件了

以上所說的都是針對命名匯出的變數或函式，那么如何匯入一個默認匯出的變數或函式呢？

// 將通過 export default 匯出的變數匯入
import print from './B.js'

print()  // show方法被呼叫

命名匯出的變數都是通過 {} 來接收的，那么去掉 {} ，接收的就是默認匯出的變數了，因為匯出的變數是匿名的，因此我們可以隨意地起個變數名用于接收

補充： 這里特別提一下，與CommonJS不同，ES6 Module 的匯入檔案路徑是不支持運算式的

3. CommonJS 與 ES6 Module 的區別

這兩者的主要區別主要有以下兩點：

1. 對于模塊的依賴，CommonJS是動態的，ES6 Module 是靜態的
2. CommonJS匯入的是值的拷貝，ES6 Module匯入的是值的參考

3.1 區別一

對于模塊的依賴，何為動態？何為靜態？

動態是指對于模塊的依賴關系建立在代碼執行階段；
靜態是指對于模塊的依賴關系建立在代碼編譯階段；

上文提到，CommonJS匯入時，require 的路徑引數是支持運算式的，例如

// A.js
let fileName = 'example.js'
const bModule = require('./' + fileName)

因為該路徑在代碼執行時是可以動態改變的，所以如果在代碼編譯階段就建立各個模塊的依賴關系，那么一定是不準確的，只有在代碼運行了以后，才可以真正確認模塊的依賴關系，因此說CommonJS是動態的，

那么現在你也應該也知道為什么 ES6 Module 是靜態的了吧

3.2 區別二

為了驗證這一點，我準備用實體來演示一下

首先來驗證CommonJS，代碼如下

// B.js
let count = 3

function change() {
    count ++    // 變數count + 1
    console.log('原count值為：', count);  // 列印B.js模塊中count的值
}

module.exports = {
    count,
    change
}

// A.js
let count = require('./B.js').count 
let change = require('./B.js').change

console.log('改變前：', count);   
change()     // 呼叫模塊B.js中的change方法，將原來的count + 1
console.log('改變后：', count); 

// 運行A.js檔案的結果
改變前：3
原count值為：4
改變后：3

在上述代碼中我們可以看到，在 A.js 檔案中匯入了 B.js 檔案中的變數 count 和 函式 change，因為匯入的 count 只是對原有值的一個拷貝，因此盡管我們呼叫了函式 change 改變了 B.js 檔案中變數 count 的值，也不會影響到 A.js 檔案中的變數 count

根據這個結果得出結論：CommonJS匯入的變數是對原值的拷貝

接下來再來驗證一下ES6 Module，代碼如下

// B.js
let count = 3

function change() {
    count ++        // 變數count + 1
    console.log(count);   // 列印B.js模塊中count的值
}

export {count, change}

// A.js
import {count, change} from './B.js';

console.log('改變前：',count);

change()         // 呼叫模塊B.js中的change方法，將原來的count + 1

console.log('改變后：', count);

// 運行A.js檔案的結果
改變前：3
原count值為：4
改變后：4

相比較于CommonJS的結果，ES6 Module匯入的變數 count 隨著原值的改變而改變了

根據這個結果得出結論：ES6 Module匯入的變數是對原值的參考

4. The end

本篇文章就到此結束啦，關于CommonJS和ES6 Module，還有一些本文未提及的知識，還是希望大家深入了解