【原理級(jí)別】深入淺出 Commonjs 和 Es Module

一 前言

今天我們來(lái)深度分析一下 Commonjs 和 Es Module，希望通過(guò)本文的學(xué)習(xí)，能夠讓大家徹底明白 Commonjs 和 Es Module 原理，能夠一次性搞定面試中遇到的大部分有關(guān) Commonjs 和 Es Module 的問(wèn)題。

老規(guī)矩我們帶上疑問(wèn)開(kāi)始今天的分析??????：

• 1 Commonjs 和 Es Module 有什么區(qū)別 ？
• 2 Commonjs 如何解決的循環(huán)引用問(wèn)題 ？
• 3 既然有了 exports，為何又出了 module.exports? 既生瑜，何生亮 ？
• 4 require 模塊查找機(jī)制 ？
• 5 Es Module 如何解決循環(huán)引用問(wèn)題 ？
• 6 exports = {} 這種寫(xiě)法為何無(wú)效 ？
• 7 關(guān)于 import() 的動(dòng)態(tài)引入 ？
• 8 Es Module 如何改變模塊下的私有變量 ？
• 9 ...

ps:由于作者前一段時(shí)間在寫(xiě)《React進(jìn)階實(shí)踐指南》小冊(cè)，沒(méi)有時(shí)間持續(xù)輸出高質(zhì)量文章，接下來(lái)我會(huì)回歸創(chuàng)作高質(zhì)量技術(shù)文章，送人玫瑰，手有余香，希望閱讀的朋友能給作者點(diǎn)個(gè)贊??，鼓勵(lì)我持續(xù)創(chuàng)作。

二 模塊化

早期 JavaScript 開(kāi)發(fā)很容易存在全局污染和依賴(lài)管理混亂問(wèn)題。這些問(wèn)題在多人開(kāi)發(fā)前端應(yīng)用的情況下變得更加棘手。我這里例舉一個(gè)很常見(jiàn)的場(chǎng)景：

??<script?src="./index.js">script>
??<script?src="./home.js">script>
??<script?src="./list.js">script>
</body>

如上在沒(méi)有模塊化的前提下，如果在 html 中這么寫(xiě)，那么就會(huì)暴露一系列問(wèn)題。

• 全局污染

沒(méi)有模塊化，那么 script 內(nèi)部的變量是可以相互污染的。比如有一種場(chǎng)景，如上 ./index.js 文件和 ./list.js 文件為小 A 開(kāi)發(fā)的，./home.js 為小 B 開(kāi)發(fā)的。

小 A 在 index.js中聲明 name 屬性是一個(gè)字符串。

var?name?=?'我不是外星人'

然后小 A 在 list.js 中，引用 name 屬性，

console.log(name)

打印卻發(fā)現(xiàn) name 竟然變成了一個(gè)函數(shù)。剛開(kāi)始小 A 不知所措，后來(lái)發(fā)現(xiàn)在小 B 開(kāi)發(fā)的 home.js 文件中這么寫(xiě)道：

function?name(){
????//...
}

而且這個(gè) name 方法被引用了多次，導(dǎo)致一系列的連鎖反應(yīng)。

上述例子就是沒(méi)有使用模塊化開(kāi)發(fā)，造成的全局污染的問(wèn)題，每個(gè)加載的 js 文件都共享變量。當(dāng)然在實(shí)際的項(xiàng)目開(kāi)發(fā)中，可以使用匿名函數(shù)自執(zhí)行的方式，形成獨(dú)立的塊級(jí)作用域解決這個(gè)問(wèn)題。

只需要在 home.js 中這么寫(xiě)道：

(function?(){
????function?name(){
????????//...
????}
})()

這樣小 A 就能正常在 list.js 中獲取 name 屬性。但是這只是一個(gè) demo ，我們不能保證在實(shí)際開(kāi)發(fā)中情況會(huì)更加復(fù)雜。所以不使用模塊開(kāi)發(fā)會(huì)暴露出很多風(fēng)險(xiǎn)。

• 依賴(lài)管理

依賴(lài)管理也是一個(gè)難以處理的問(wèn)題。還是如上的例子，正常情況下，執(zhí)行 js 的先后順序就是 script 標(biāo)簽排列的前后順序。那么如何三個(gè) js 之間有依賴(lài)關(guān)系，那么應(yīng)該如何處理呢？

假設(shè)三個(gè) js 中，都有一個(gè)公共方法 fun1 ， fun2 ， fun3。三者之間的依賴(lài)關(guān)系如下圖所示。

• 下層 js 能調(diào)用上層 js 的方法，但是上層 js 無(wú)法調(diào)用下層 js 的方法。

所以就需要模塊化來(lái)解決上述的問(wèn)題，今天我們就重點(diǎn)講解一下前端模塊化的兩個(gè)重要方案：Commonjs 和 Es Module

三 Commonjs

Commonjs 的提出，彌補(bǔ) Javascript 對(duì)于模塊化，沒(méi)有統(tǒng)一標(biāo)準(zhǔn)的缺陷。nodejs 借鑒了 Commonjs 的 Module ，實(shí)現(xiàn)了良好的模塊化管理。

目前 commonjs 廣泛應(yīng)用于以下幾個(gè)場(chǎng)景：

• Node 是 CommonJS 在服務(wù)器端一個(gè)具有代表性的實(shí)現(xiàn)；
• Browserify 是 CommonJS 在瀏覽器中的一種實(shí)現(xiàn)；
• webpack 打包工具對(duì) CommonJS 的支持和轉(zhuǎn)換；也就是前端應(yīng)用也可以在編譯之前，盡情使用 CommonJS 進(jìn)行開(kāi)發(fā)。

1 commonjs 使用與原理

在使用 ?規(guī)范下，有幾個(gè)顯著的特點(diǎn)。

• 在 commonjs 中每一個(gè) js 文件都是一個(gè)單獨(dú)的模塊，我們可以稱(chēng)之為 module；
• 該模塊中，包含 CommonJS 規(guī)范的核心變量: exports、module.exports、require；
• exports 和 module.exports 可以負(fù)責(zé)對(duì)模塊中的內(nèi)容進(jìn)行導(dǎo)出；
• require 函數(shù)可以幫助我們導(dǎo)入其他模塊（自定義模塊、系統(tǒng)模塊、第三方庫(kù)模塊）中的內(nèi)容；

commonjs 使用初體驗(yàn)

導(dǎo)出：我們先嘗試這導(dǎo)出一個(gè)模塊：

hello.js中

let?name?=?'《React進(jìn)階實(shí)踐指南》'
module.exports?=?function?sayName??(){
????return?name
}

導(dǎo)入：接下來(lái)簡(jiǎn)單的導(dǎo)入：

home.js

const?sayName?=?require('./hello.js')
module.exports?=?function?say(){
????return?{
????????name:sayName(),
????????author:'我不是外星人'
????}
}

如上就是 Commonjs 最簡(jiǎn)單的實(shí)現(xiàn)，那么暴露出兩個(gè)問(wèn)題：

• 如何解決變量污染的問(wèn)題。
• module.exports，exports，require 三者是如何工作的？又有什么關(guān)系？

commonjs 實(shí)現(xiàn)原理

首先從上述得知每個(gè)模塊文件上存在 module，exports，require三個(gè)變量，然而這三個(gè)變量是沒(méi)有被定義的，但是我們可以在 Commonjs 規(guī)范下每一個(gè) js 模塊上直接使用它們。在 nodejs 中還存在 __filename 和 __dirname 變量。

如上每一個(gè)變量代表什么意思呢：

• module 記錄當(dāng)前模塊信息。
• require 引入模塊的方法。
• exports 當(dāng)前模塊導(dǎo)出的屬性

在編譯的過(guò)程中，實(shí)際 Commonjs 對(duì) js 的代碼塊進(jìn)行了首尾包裝， 我們以上述的 home.js 為例子??，它被包裝之后的樣子如下：

(function(exports,require,module,__filename,__dirname){
???const?sayName?=?require('./hello.js')
????module.exports?=?function?say(){
????????return?{
????????????name:sayName(),
????????????author:'我不是外星人'
????????}
????}
})

• 在 Commonjs 規(guī)范下模塊中，會(huì)形成一個(gè)包裝函數(shù)，我們寫(xiě)的代碼將作為包裝函數(shù)的執(zhí)行上下文，使用的 require ，exports ，module 本質(zhì)上是通過(guò)形參的方式傳遞到包裝函數(shù)中的。

那么包裝函數(shù)本質(zhì)上是什么樣子的呢？

function?wrapper?(script)?{
????return?'(function?(exports,?require,?module,?__filename,?__dirname)?{'?+?
????????script?+
?????'\n})'
}

包裝函數(shù)執(zhí)行。

const?modulefunction?=?wrapper(`
??const?sayName?=?require('./hello.js')
????module.exports?=?function?say(){
????????return?{
????????????name:sayName(),
????????????author:'我不是外星人'
????????}
????}
`)

• 如上模擬了一個(gè)包裝函數(shù)功能， script 為我們?cè)?js 模塊中寫(xiě)的內(nèi)容，最后返回的就是如上包裝之后的函數(shù)。當(dāng)然這個(gè)函數(shù)暫且是一個(gè)字符串。

?runInThisContext(modulefunction)(module.exports,?require,?module,?__filename,?__dirname)

• 在模塊加載的時(shí)候，會(huì)通過(guò) runInThisContext (可以理解成 eval ) 執(zhí)行 modulefunction ，傳入require ，exports ，module 等參數(shù)。最終我們寫(xiě)的 nodejs 文件就這么執(zhí)行了。

到此為止，完成了整個(gè)模塊執(zhí)行的原理。接下來(lái)我們來(lái)分析以下 require 文件加載的流程。

2 require 文件加載流程

上述說(shuō)了 commonjs 規(guī)范大致的實(shí)現(xiàn)原理，接下來(lái)我們分析一下， require 如何進(jìn)行文件的加載的。

我們還是以 nodejs 為參考，比如如下代碼片段中：

const?fs?=??????require('fs')??????//?①核心模塊
const?sayName?=?require('./hello.js')??//②?文件模塊
const?crypto?=??require('crypto-js')???//?③第三方自定義模塊

如上代碼片段中：

• ① 為 nodejs 底層的核心模塊。
• ② 為我們編寫(xiě)的文件模塊，比如上述 sayName
• ③ 為我們通過(guò) npm 下載的第三方自定義模塊，比如 crypto-js。

當(dāng) require 方法執(zhí)行的時(shí)候，接收的唯一參數(shù)作為一個(gè)標(biāo)識(shí)符 ，Commonjs 下對(duì)不同的標(biāo)識(shí)符，處理流程不同，但是目的相同，都是找到對(duì)應(yīng)的模塊。

require 加載標(biāo)識(shí)符原則

首先我們看一下 nodejs 中對(duì)標(biāo)識(shí)符的處理原則。

• 首先像 fs ，http ，path 等標(biāo)識(shí)符，會(huì)被作為 nodejs 的核心模塊。
• ./ 和 ../ 作為相對(duì)路徑的文件模塊， / 作為絕對(duì)路徑的文件模塊。
• 非路徑形式也非核心模塊的模塊，將作為自定義模塊。

核心模塊的處理：

核心模塊的優(yōu)先級(jí)僅次于緩存加載，在 Node 源碼編譯中，已被編譯成二進(jìn)制代碼，所以加載核心模塊，加載過(guò)程中速度最快。

路徑形式的文件模塊處理：

已 ./ ，../ 和 / 開(kāi)始的標(biāo)識(shí)符，會(huì)被當(dāng)作文件模塊處理。require() 方法會(huì)將路徑轉(zhuǎn)換成真實(shí)路徑，并以真實(shí)路徑作為索引，將編譯后的結(jié)果緩存起來(lái)，第二次加載的時(shí)候會(huì)更快。至于怎么緩存的？我們稍后會(huì)講到。

自定義模塊處理：自定義模塊，一般指的是非核心的模塊，它可能是一個(gè)文件或者一個(gè)包，它的查找會(huì)遵循以下原則：

• 在當(dāng)前目錄下的 node_modules 目錄查找。
• 如果沒(méi)有，在父級(jí)目錄的 node_modules 查找，如果沒(méi)有在父級(jí)目錄的父級(jí)目錄的 node_modules 中查找。
• 沿著路徑向上遞歸，直到根目錄下的 node_modules 目錄。
• 在查找過(guò)程中，會(huì)找 package.json 下 main 屬性指向的文件，如果沒(méi)有 ?package.json ，在 node 環(huán)境下會(huì)以此查找 index.js ，index.json ，index.node。

查找流程圖如下所示：

3 require 模塊引入與處理

CommonJS 模塊同步加載并執(zhí)行模塊文件，CommonJS 模塊在執(zhí)行階段分析模塊依賴(lài)，采用深度優(yōu)先遍歷（depth-first traversal），執(zhí)行順序是父 -> 子 -> 父；

為了搞清除 require 文件引入流程。我們接下來(lái)再舉一個(gè)例子，這里注意一下細(xì)節(jié)：

• a.js文件

const?getMes?=?require('./b')
console.log('我是?a?文件')
exports.say?=?function(){
????const?message?=?getMes()
????console.log(message)
}

• b.js文件

const?say?=?require('./a')
const??object?=?{
???name:'《React進(jìn)階實(shí)踐指南》',
???author:'我不是外星人'
}
console.log('我是?b?文件')
module.exports?=?function(){
????return?object
}

• 主文件main.js

const?a?=?require('./a')
const?b?=?require('./b')

console.log('node?入口文件')

接下來(lái)終端輸入 node main.js 運(yùn)行 main.js，效果如下：

從上面的運(yùn)行結(jié)果可以得出以下結(jié)論：

• main.js 和 a.js 模塊都引用了 b.js 模塊，但是 b.js 模塊只執(zhí)行了一次。
• a.js 模塊 和 b.js 模塊互相引用，但是沒(méi)有造成循環(huán)引用的情況。
• 執(zhí)行順序是父 -> 子 -> 父；

那么 Common.js 規(guī)范是如何實(shí)現(xiàn)上述效果的呢？

require 加載原理

首先為了弄清楚上述兩個(gè)問(wèn)題。我們要明白兩個(gè)感念，那就是 module 和 Module。

module ：在 Node 中每一個(gè) js 文件都是一個(gè) module ，module 上保存了 exports 等信息之外，還有一個(gè) loaded 表示該模塊是否被加載。

• 為 false 表示還沒(méi)有加載；
• 為 true 表示已經(jīng)加載

Module ：以 nodejs 為例，整個(gè)系統(tǒng)運(yùn)行之后，會(huì)用 Module 緩存每一個(gè)模塊加載的信息。

require 的源碼大致長(zhǎng)如下的樣子：

?//?id?為路徑標(biāo)識(shí)符
function?require(id)?{
???/*?查找??Module?上有沒(méi)有已經(jīng)加載的?js??對(duì)象*/
???const??cachedModule?=?Module._cache[id]
???
???/*?如果已經(jīng)加載了那么直接取走緩存的?exports?對(duì)象??*/
??if(cachedModule){
????return?cachedModule.exports
??}
?
??/*?創(chuàng)建當(dāng)前模塊的?module??*/
??const?module?=?{?exports:?{}?,loaded:?false?,?...}

??/*?將?module?緩存到??Module?的緩存屬性中，路徑標(biāo)識(shí)符作為?id?*/??
??Module._cache[id]?=?module
??/*?加載文件?*/
??runInThisContext(wrapper('module.exports?=?"123"'))(module.exports,?require,?module,?__filename,?__dirname)
??/*?加載完成?*//
??module.loaded?=?true?
??/*?返回值?*/
??return?module.exports
}

從上面我們總結(jié)出一次 require 大致流程是這樣的；

• require 會(huì)接收一個(gè)參數(shù)——文件標(biāo)識(shí)符，然后分析定位文件，分析過(guò)程我們上述已經(jīng)講到了，加下來(lái)會(huì)從 Module 上查找有沒(méi)有緩存，如果有緩存，那么直接返回緩存的內(nèi)容。

• 如果沒(méi)有緩存，會(huì)創(chuàng)建一個(gè) module 對(duì)象，緩存到 Module 上，然后執(zhí)行文件，加載完文件，將 loaded 屬性設(shè)置為 true ，然后返回 module.exports 對(duì)象。借此完成模塊加載流程。

• 模塊導(dǎo)出就是 return 這個(gè)變量的其實(shí)跟 a = b 賦值一樣， 基本類(lèi)型導(dǎo)出的是值， 引用類(lèi)型導(dǎo)出的是引用地址。

• exports 和 module.exports 持有相同引用，因?yàn)樽詈髮?dǎo)出的是 module.exports， 所以對(duì) exports 進(jìn)行賦值會(huì)導(dǎo)致 exports 操作的不再是 module.exports 的引用。

require 避免重復(fù)加載

從上面我們可以直接得出，require 如何避免重復(fù)加載的，首先加載之后的文件的 module 會(huì)被緩存到 Module 上，比如一個(gè)模塊已經(jīng) require 引入了 a 模塊，如果另外一個(gè)模塊再次引用 a ，那么會(huì)直接讀取緩存值 module ，所以無(wú)需再次執(zhí)行模塊。

對(duì)應(yīng) demo 片段中，首先 main.js 引用了 a.js ，a.js 中 require 了 b.js 此時(shí) b.js 的 module 放入緩存 Module 中，接下來(lái) main.js 再次引用 ?b.js ，那么直接走的緩存邏輯。所以 b.js 只會(huì)執(zhí)行一次，也就是在 a.js 引入的時(shí)候。

require 避免循環(huán)引用

那么接下來(lái)這個(gè)循環(huán)引用問(wèn)題，也就很容易解決了。為了讓大家更清晰明白，那么我們接下來(lái)一起分析整個(gè)流程。

• ① 首先執(zhí)行 node main.js ，那么開(kāi)始執(zhí)行第一行 require(a.js)；
• ② 那么首先判斷 a.js 有沒(méi)有緩存，因?yàn)闆](méi)有緩存，先加入緩存，然后執(zhí)行文件 a.js （需要注意 是先加入緩存， 后執(zhí)行模塊內(nèi)容）;
• ③ a.js 中執(zhí)行第一行，引用 b.js。
• ④ 那么判斷 b.js 有沒(méi)有緩存，因?yàn)闆](méi)有緩存，所以加入緩存，然后執(zhí)行 b.js 文件。
• ⑤ b.js 執(zhí)行第一行，再一次循環(huán)引用 require(a.js) 此時(shí)的 a.js 已經(jīng)加入緩存，直接讀取值。接下來(lái)打印 console.log('我是 b 文件')，導(dǎo)出方法。
• ⑥ b.js 執(zhí)行完畢，回到 a.js 文件，打印 console.log('我是 a 文件')，導(dǎo)出方法。
• ⑦ 最后回到 main.js，打印 console.log('node 入口文件') 完成這個(gè)流程。

不過(guò)這里我們要注意問(wèn)題：

• 如上第 ⑤ 的時(shí)候，當(dāng)執(zhí)行 b.js 模塊的時(shí)候，因?yàn)?a.js 還沒(méi)有導(dǎo)出 say 方法，所以 b.js 同步上下文中，獲取不到 say。

我用一幅流程圖描述上述過(guò)程：

為了進(jìn)一步驗(yàn)證上面所說(shuō)的，我們改造一下 b.js 如下:

const?say?=?require('./a')
const??object?=?{
???name:'《React進(jìn)階實(shí)踐指南》',
???author:'我不是外星人'
}
console.log('我是?b?文件')
console.log('打印?a?模塊'?,?say)

setTimeout(()=>{
????console.log('異步打印?a?模塊'?,?say)
},0)

module.exports?=?function(){
????return?object
}

打印結(jié)果：

• 第一次打印 say 為空對(duì)象。
• 第二次打印 say 才看到 b.js 導(dǎo)出的方法。

那么如何獲取到 say 呢，有兩種辦法：

• 一是用動(dòng)態(tài)加載 a.js 的方法，馬上就會(huì)講到。
• 二個(gè)就是如上放在異步中加載。

我們注意到 a.js 是用 exports.say 方式導(dǎo)出的，如果 a.js 用 module.exports 結(jié)果會(huì)有所不同。至于有什么不同，為什么？我接下來(lái)會(huì)講到。

4 require 動(dòng)態(tài)加載

上述我們講了 require 查找文件和加載流程。接下來(lái)介紹 commonjs 規(guī)范下的 require 的另外一個(gè)特性——動(dòng)態(tài)加載。

require 可以在任意的上下文，動(dòng)態(tài)加載模塊。我對(duì)上述 a.js 修改。

a.js：

console.log('我是?a?文件')
exports.say?=?function(){
????const?getMes?=?require('./b')
????const?message?=?getMes()
????console.log(message)
}

main.js：

const?a?=?require('./a')
a.say()

• 如上在 a.js 模塊的 say 函數(shù)中，用 require 動(dòng)態(tài)加載 b.js 模塊。然后執(zhí)行在 main.js 中執(zhí)行 a.js 模塊的 say 方法。

打印結(jié)果如下：

require 本質(zhì)上就是一個(gè)函數(shù)，那么函數(shù)可以在任意上下文中執(zhí)行，來(lái)自由地加載其他模塊的屬性方法。

5 exports 和 module.exports

系統(tǒng)分析完 require ，接下來(lái)我們分析一下，exports 和 module.exports，首先看一下兩個(gè)的用法。

exports 使用

第一種方式：exportsa.js

exports.name?=?`《React進(jìn)階實(shí)踐指南》`
exports.author?=?`我不是外星人`
exports.say?=?function?(){
????console.log(666)
}

引用

const?a?=?require('./a')
console.log(a)

打印結(jié)果：

• exports 就是傳入到當(dāng)前模塊內(nèi)的一個(gè)對(duì)象，本質(zhì)上就是 module.exports。

問(wèn)題：為什么 exports={} 直接賦值一個(gè)對(duì)象就不可以呢？ 比如我們將如上 a.js 修改一下：

exports={
????name:'《React進(jìn)階實(shí)踐指南》',
????author:'我不是外星人',
????say(){
????????console.log(666)
????}
}

打印結(jié)果：

理想情況下是通過(guò) exports = {} 直接賦值，不需要在 ?exports.a = xxx ?每一個(gè)屬性，但是如上我們看到了這種方式是無(wú)效的。為什么會(huì)這樣？實(shí)際這個(gè)是 js 本身的特性決定的。

通過(guò)上述講解都知道 exports ， module 和 require 作為形參的方式傳入到 js 模塊中。我們直接 exports = {} ?修改 exports ，等于重新賦值了形參，那么會(huì)重新賦值一份，但是不會(huì)在引用原來(lái)的形參。舉一個(gè)簡(jiǎn)單的例子

function?wrap?(myExports){
????myExports={
???????name:'我不是外星人'
???}
}

let?myExports?=?{
????name:'alien'
}
wrap(myExports)
console.log(myExports)

打印：

我們期望修改 myExports ，但是沒(méi)有任何作用。

假設(shè) wrap 就是 Commonjs 規(guī)范下的包裝函數(shù)，我們的 js 代碼就是包裝函數(shù)內(nèi)部的內(nèi)容。當(dāng)我們把 ?myExports 對(duì)象傳進(jìn)去，但是直接賦值 myExports = { name:'我不是外星人' } 沒(méi)有任何作用，相等于內(nèi)部重新聲明一份 myExports 而和外界的 myExports 斷絕了關(guān)系。所以解釋了為什么不能 exports={...} 直接賦值。

那么解決上述也容易，只需要函數(shù)中像 exports.name 這么寫(xiě)就可以了。

function?wrap?(myExports){
????myExports.name='我不是外星人'
}

打印：

module.exports 使用

module.exports 本質(zhì)上就是 exports ，我們用 module.exports 來(lái)實(shí)現(xiàn)如上的導(dǎo)出。

module.exports?={
????name:'《React進(jìn)階實(shí)踐指南》',
????author:'我不是外星人',
????say(){
????????console.log(666)
????}
}

module.exports 也可以單獨(dú)導(dǎo)出一個(gè)函數(shù)或者一個(gè)類(lèi)。比如如下：

module.exports?=?function?(){
????//?...
}

從上述 require 原理實(shí)現(xiàn)中，我們知道了 exports 和 module.exports 持有相同引用，因?yàn)樽詈髮?dǎo)出的是 module.exports 。那么這就說(shuō)明在一個(gè)文件中，我們最好選擇 exports 和 module.exports 兩者之一，如果兩者同時(shí)存在，很可能會(huì)造成覆蓋的情況發(fā)生。比如如下情況：

exports.name?=?'alien'?//?此時(shí)?exports.name?是無(wú)效的
module.exports?={
????name:'《React進(jìn)階實(shí)踐指南》',
????author:'我不是外星人',
????say(){
????????console.log(666)
????}
}

• 上述情況下 exports.name 無(wú)效，會(huì)被 module.exports 覆蓋。

Q & A

1 那么問(wèn)題來(lái)了？既然有了 exports，為何又出了 module.exports?

答：如果我們不想在 commonjs 中導(dǎo)出對(duì)象，而是只導(dǎo)出一個(gè)類(lèi)或者一個(gè)函數(shù)再或者其他屬性的情況，那么 module.exports 就更方便了，如上我們知道 exports 會(huì)被初始化成一個(gè)對(duì)象，也就是我們只能在對(duì)象上綁定屬性，但是我們可以通過(guò) module.exports 自定義導(dǎo)出出對(duì)象外的其他類(lèi)型元素。

let?a?=?1
module.exports?=?a?//?導(dǎo)出函數(shù)

module.exports?=?[1,2,3]?//?導(dǎo)出數(shù)組

module.exports?=?function(){}?//導(dǎo)出方法

2 與 exports 相比，module.exports 有什么缺陷 ？

答：module.exports 當(dāng)導(dǎo)出一些函數(shù)等非對(duì)象屬性的時(shí)候，也有一些風(fēng)險(xiǎn)，就比如循環(huán)引用的情況下。對(duì)象會(huì)保留相同的內(nèi)存地址，就算一些屬性是后綁定的，也能間接通過(guò)異步形式訪問(wèn)到。但是如果 module.exports 為一個(gè)非對(duì)象其他屬性類(lèi)型，在循環(huán)引用的時(shí)候，就容易造成屬性丟失的情況發(fā)生了。

四 Es Module

Nodejs 借鑒了 Commonjs 實(shí)現(xiàn)了模塊化 ，從 ES6 開(kāi)始， JavaScript 才真正意義上有自己的模塊化規(guī)范，

Es Module 的產(chǎn)生有很多優(yōu)勢(shì)，比如:

• 借助 Es Module 的靜態(tài)導(dǎo)入導(dǎo)出的優(yōu)勢(shì)，實(shí)現(xiàn)了 tree shaking。
• Es Module 還可以 import() 懶加載方式實(shí)現(xiàn)代碼分割。

在 Es Module 中用 export 用來(lái)導(dǎo)出模塊，import 用來(lái)導(dǎo)入模塊。但是 export 配合 import 會(huì)有很多種組合情況，接下來(lái)我們逐一分析一下。

導(dǎo)出 export 和導(dǎo)入 import

所有通過(guò) export 導(dǎo)出的屬性，在 import 中可以通過(guò)結(jié)構(gòu)的方式，解構(gòu)出來(lái)。

export 正常導(dǎo)出，import 導(dǎo)入

導(dǎo)出模塊：a.js

const?name?=?'《React進(jìn)階實(shí)踐指南》'?
const?author?=?'我不是外星人'
export?{?name,?author?}
export?const?say?=?function?(){
????console.log('hello?,?world')
}

導(dǎo)入模塊：main.js

//?name?,?author?,?say?對(duì)應(yīng)?a.js?中的??name?,?author?,?say
import?{?name?,?author?,?say?}?from?'./a.js'

• export { }， 與變量名綁定，命名導(dǎo)出。
• import { } from 'module'， 導(dǎo)入 module 的命名導(dǎo)出 ，module 為如上的 ./a.js
• 這種情況下 import { } 內(nèi)部的變量名稱(chēng)，要與 export { } 完全匹配。

默認(rèn)導(dǎo)出 export default

導(dǎo)出模塊：a.js

const?name?=?'《React進(jìn)階實(shí)踐指南》'
const?author?=?'我不是外星人'
const?say?=?function?(){
????console.log('hello?,?world')
}
export?default?{
????name,
????author,
????say
}?

導(dǎo)入模塊：main.js

import?mes?from?'./a.js'
console.log(mes)?//{?name:?'《React進(jìn)階實(shí)踐指南》',author:'我不是外星人',?say:Function?}

• export default anything 導(dǎo)入 module 的默認(rèn)導(dǎo)出。anything 可以是函數(shù)，屬性方法，或者對(duì)象。
• 對(duì)于引入默認(rèn)導(dǎo)出的模塊，import anyName from 'module'， anyName 可以是自定義名稱(chēng)。

混合導(dǎo)入｜導(dǎo)出

ES6 module 可以使用 export default 和 export 導(dǎo)入多個(gè)屬性。

導(dǎo)出模塊：a.js

export?const?name?=?'《React進(jìn)階實(shí)踐指南》'
export?const?author?=?'我不是外星人'

export?default??function?say?(){
????console.log('hello?,?world')
}

導(dǎo)入模塊：main.js 中有幾種導(dǎo)入方式：

第一種：

import?theSay?,?{?name,?author?as??bookAuthor?}?from?'./a.js'
console.log(
????theSay,?????//???say()?{console.log('hello?,?world')?}
????name,???????//?"《React進(jìn)階實(shí)踐指南》"
????bookAuthor??//?"我不是外星人"
)

第二種：

import?theSay,?*?as?mes?from?'./a'
console.log(
????theSay,?//???say()?{?console.log('hello?,?world')?}
????mes?//?{?name:'《React進(jìn)階實(shí)踐指南》'?,?author:?"我不是外星人"?，default:????say()?{?console.log('hello?,?world')?}?}
)

• 導(dǎo)出的屬性被合并到 mes 屬性上， export 被導(dǎo)入到對(duì)應(yīng)的屬性上，export default 導(dǎo)出內(nèi)容被綁定到 default 屬性上。theSay 也可以作為被 export default 導(dǎo)出屬性。

重屬名導(dǎo)入

import?{?bookName?as?name,?say,?bookAuthor?as?author?}?from?'module'
console.log(?bookName?,?bookAuthor?,?say?)?//《React進(jìn)階實(shí)踐指南》?我不是外星人

• 從 module 模塊中引入 name ，并重命名為 bookName ，從 module 模塊中引入 author ，并重命名為 bookAuthor。然后在當(dāng)前模塊下，使用被重命名的名字。

重定向?qū)С?/strong>

可以把當(dāng)前模塊作為一個(gè)中轉(zhuǎn)站，一方面引入 module 內(nèi)的屬性，然后把屬性再給導(dǎo)出去。

export?*?from?'module'?//?第一種方式
export?{?name,?author,?...,?say?}?from?'module'?//?第二種方式
export?{?bookName?as?name,?bookAuthor?as?author,?...,?say?}?from?'module'?//第三種方式

• 第一種方式：重定向?qū)С?module 中的所有導(dǎo)出屬性， 但是不包括 module 內(nèi)的 default 屬性。
• 第二種方式：從 module 中導(dǎo)入 name ，author ，say 再以相同的屬性名，導(dǎo)出。
• 第三種方式：從 module 中導(dǎo)入 name ，重屬名為 bookName 導(dǎo)出，從 module 中導(dǎo)入 author ，重屬名為 bookAuthor 導(dǎo)出，正常導(dǎo)出 say 。

無(wú)需導(dǎo)入模塊，只運(yùn)行模塊

import?'module'?

• 執(zhí)行 module 不導(dǎo)出值 ?多次調(diào)用 module 只運(yùn)行一次。

動(dòng)態(tài)導(dǎo)入

const?promise?=?import('module')

• import('module')，動(dòng)態(tài)導(dǎo)入返回一個(gè) Promise。為了支持這種方式，需要在 webpack 中做相應(yīng)的配置處理。

ES6 module 特性

接下來(lái)我們重點(diǎn)分析一下 ES6 module 一些重要特性。

1 靜態(tài)語(yǔ)法

ES6 module 的引入和導(dǎo)出是靜態(tài)的，import 會(huì)自動(dòng)提升到代碼的頂層 ，import , export 不能放在塊級(jí)作用域或條件語(yǔ)句中。

??錯(cuò)誤寫(xiě)法一：

function?say(){
??import?name?from?'./a.js'??
??export?const?author?=?'我不是外星人'
}

??錯(cuò)誤寫(xiě)法二：

isexport?&&??export?const??name?=?'《React進(jìn)階實(shí)踐指南》'

這種靜態(tài)語(yǔ)法，在編譯過(guò)程中確定了導(dǎo)入和導(dǎo)出的關(guān)系，所以更方便去查找依賴(lài)，更方便去 tree shaking (搖樹(shù)) ， 可以使用 lint 工具對(duì)模塊依賴(lài)進(jìn)行檢查，可以對(duì)導(dǎo)入導(dǎo)出加上類(lèi)型信息進(jìn)行靜態(tài)的類(lèi)型檢查。

import 的導(dǎo)入名不能為字符串或在判斷語(yǔ)句，下面代碼是錯(cuò)誤的

??錯(cuò)誤寫(xiě)法三：

import?'defaultExport'?from?'module'

let?name?=?'Export'
import?'default'?+?name?from?'module'

2 執(zhí)行特性

ES6 module 和 Common.js 一樣，對(duì)于相同的 js 文件，會(huì)保存靜態(tài)屬性。

但是與 Common.js 不同的是 ，CommonJS 模塊同步加載并執(zhí)行模塊文件，ES6 模塊提前加載并執(zhí)行模塊文件，ES6 模塊在預(yù)處理階段分析模塊依賴(lài)，在執(zhí)行階段執(zhí)行模塊，兩個(gè)階段都采用深度優(yōu)先遍歷，執(zhí)行順序是子 -> 父。

為了驗(yàn)證這一點(diǎn)，看一下如下 demo。

main.js

console.log('main.js開(kāi)始執(zhí)行')
import?say?from?'./a'
import?say1?from?'./b'
console.log('main.js執(zhí)行完畢')

a.js

import?b?from?'./b'
console.log('a模塊加載')
export?default??function?say?(){
????console.log('hello?,?world')
}

b.js

console.log('b模塊加載')
export?default?function?sayhello(){
????console.log('hello,world')
}

• main.js 和 a.js 都引用了 b.js 模塊，但是 b 模塊也只加載了一次。
• 執(zhí)行順序是子 -> 父

效果如下：

12.jpg

3 導(dǎo)出綁定

不能修改import導(dǎo)入的屬性

a.js

export?let?num?=?1
export?const?addNumber?=?()=>{
????num++
}

main.js中

import?{??num?,?addNumber?}?from?'./a'
num?=?2

如果直接修改，那么會(huì)報(bào)錯(cuò)。如下所示：

屬性綁定

所以可以在 main.js 中這么修改。

import?{??num?,?addNumber?}?from?'./a'

console.log(num)?//?num?=?1
addNumber()
console.log(num)?//?num?=?2

• 如上屬性 num 的導(dǎo)入是綁定的。

接下來(lái)對(duì) import 屬性作出總結(jié)：

• 使用 import 被導(dǎo)入的模塊運(yùn)行在嚴(yán)格模式下。
• 使用 import 被導(dǎo)入的變量是只讀的，可以理解默認(rèn)為 const 裝飾，無(wú)法被賦值
• 使用 import 被導(dǎo)入的變量是與原變量綁定/引用的，可以理解為 import 導(dǎo)入的變量無(wú)論是否為基本類(lèi)型都是引用傳遞。

import() 動(dòng)態(tài)引入

import() 返回一個(gè) Promise 對(duì)象， 返回的 Promise 的 then 成功回調(diào)中，可以獲取模塊的加載成功信息。我們來(lái)簡(jiǎn)單看一下 import() 是如何使用的。

main.js

setTimeout(()?=>?{
????const?result??=?import('./b')
????result.then(res=>{
????????console.log(res)
????})
},?0);

b.js

export?const?name?='alien'
export?default?function?sayhello(){
????console.log('hello,world')
}

打印如下：

13.jpg

從打印結(jié)果可以看出 import()的基本特性。

• import() 可以動(dòng)態(tài)使用，加載模塊。
• import() 返回一個(gè) Promise ，成功回調(diào) then 中可以獲取模塊對(duì)應(yīng)的信息。name 對(duì)應(yīng) name 屬性， default 代表 export default 。__esModule 為 es module 的標(biāo)識(shí)。

import() 可以做一些什么

動(dòng)態(tài)加載

• 首先 import() 動(dòng)態(tài)加載一些內(nèi)容，可以放在條件語(yǔ)句或者函數(shù)執(zhí)行上下文中。

if(isRequire){
????const?result??=?import('./b')
}

懶加載

• import() 可以實(shí)現(xiàn)懶加載，舉個(gè)例子 vue 中的路由懶加載；

[
???{
????????path:?'home',
????????name:?'首頁(yè)',
????????component:?()=>?import('./home')?,
???},
]

React中動(dòng)態(tài)加載

const?LazyComponent?=??React.lazy(()=>import('./text'))
class?index?extends?React.Component{???
????render(){
????????return?<React.Suspense?fallback={?<div?className="icon"><SyncOutlinespin/>div>?}?>
???????????????<LazyComponent?/>
???????????React.Suspense>
????}

React.lazy 和 Suspense 配合一起用，能夠有動(dòng)態(tài)加載組件的效果。React.lazy 接受一個(gè)函數(shù)，這個(gè)函數(shù)需要?jiǎng)討B(tài)調(diào)用 import() 。

import() 這種加載效果，可以很輕松的實(shí)現(xiàn)代碼分割。避免一次性加載大量 js 文件，造成首次加載白屏?xí)r間過(guò)長(zhǎng)的情況。

tree shaking 實(shí)現(xiàn)

Tree Shaking 在 Webpack 中的實(shí)現(xiàn)，是用來(lái)盡可能的刪除沒(méi)有被使用過(guò)的代碼，一些被 import 了但其實(shí)沒(méi)有被使用的代碼。比如以下場(chǎng)景：

a.js：

export?let?num?=?1
export?const?addNumber?=?()=>{
????num++
}
export?const?delNumber?=?()=>{
????num--
}

main.js：

import?{??addNumber?}?from?'./a'
addNumber()

• 如上 a.js 中暴露兩個(gè)方法，addNumber和 delNumber，但是整個(gè)應(yīng)用中，只用到了 addNumber，那么構(gòu)建打包的時(shí)候，delNumber將作為沒(méi)有引用的方法，不被打包進(jìn)來(lái)。

五 Commonjs 和 Es Module 總結(jié)

接下來(lái)貫穿全文，講一下 Commonjs 和 Es Module 的特性。

Commonjs 總結(jié)

Commonjs 的特性如下：

• CommonJS 模塊由 JS 運(yùn)行時(shí)實(shí)現(xiàn)。
• CommonJs 是單個(gè)值導(dǎo)出，本質(zhì)上導(dǎo)出的就是 exports 屬性。
• CommonJS 是可以動(dòng)態(tài)加載的，對(duì)每一個(gè)加載都存在緩存，可以有效的解決循環(huán)引用問(wèn)題。
• CommonJS 模塊同步加載并執(zhí)行模塊文件。

es module 總結(jié)

Es module 的特性如下：

• ES6 Module 靜態(tài)的，不能放在塊級(jí)作用域內(nèi)，代碼發(fā)生在編譯時(shí)。
• ES6 Module 的值是動(dòng)態(tài)綁定的，可以通過(guò)導(dǎo)出方法修改，可以直接訪問(wèn)修改結(jié)果。
• ES6 Module 可以導(dǎo)出多個(gè)屬性和方法，可以單個(gè)導(dǎo)入導(dǎo)出，混合導(dǎo)入導(dǎo)出。
• ES6 模塊提前加載并執(zhí)行模塊文件，
• ES6 Module 導(dǎo)入模塊在嚴(yán)格模式下。
• ES6 Module 的特性可以很容易實(shí)現(xiàn) Tree Shaking 和 Code Splitting。

六 總結(jié)

本文詳細(xì)講解了 Commonjs 和 Es Module ，希望閱讀的同學(xué)能對(duì)前端模塊化的實(shí)現(xiàn)有更深入的認(rèn)識(shí)。吃透本文，能夠輕松應(yīng)付 ?Commonjs 和 Es Module 的面試知識(shí)點(diǎn)。

如果這篇文章對(duì)你有幫助，希望能給筆者 點(diǎn)贊+收藏 以此鼓勵(lì)作者繼續(xù)創(chuàng)作前端硬核文章。也可以關(guān)注作者公眾號(hào) 全棧前端精選?第一時(shí)間推送前端好文。