「萬字進(jìn)階」深入淺出 Commonjs 和 Es Module
一 前言
今天我們來深度分析一下 Commonjs 和 Es Module，希望通過本文的學(xué)習(xí)，能夠讓大家徹底明白 Commonjs 和 Es Module 原理，能夠一次性搞定面試中遇到的大部分有關(guān) Commonjs 和 Es Module 的問題。
老規(guī)矩我們帶上疑問開始今天的分析??????：
1 Commonjs 和 Es Module 有什么區(qū)別 ？ 2 Commonjs 如何解決的循環(huán)引用問題 ？ 3 既然有了 exports，為何又出了module.exports? 既生瑜，何生亮 ？4 require模塊查找機(jī)制 ？5 Es Module 如何解決循環(huán)引用問題 ？ 6 exports = {}這種寫法為何無效 ？7 關(guān)于 import()的動態(tài)引入 ？8 Es Module 如何改變模塊下的私有變量 ？ 9 ...
ps:由于作者前一段時間在寫《React進(jìn)階實踐指南》小冊，沒有時間持續(xù)輸出高質(zhì)量文章，接下來我會回歸創(chuàng)作高質(zhì)量技術(shù)文章，送人玫瑰，手有余香，希望閱讀的朋友能給作者點個贊??，鼓勵我持續(xù)創(chuàng)作。
二 模塊化
早期 JavaScript 開發(fā)很容易存在全局污染和依賴管理混亂問題。這些問題在多人開發(fā)前端應(yīng)用的情況下變得更加棘手。我這里例舉一個很常見的場景：
<body>
<script src="./index.js"></script>
<script src="./home.js"></script>
<script src="./list.js"></script>
</body>
如上在沒有模塊化的前提下，如果在 html 中這么寫，那么就會暴露一系列問題。
全局污染
沒有模塊化，那么 script 內(nèi)部的變量是可以相互污染的。比如有一種場景，如上 ./index.js 文件和 ./list.js 文件為小 A 開發(fā)的，./home.js 為小 B 開發(fā)的。
小 A 在 index.js中聲明 name 屬性是一個字符串。
var name = '我不是外星人'
然后小 A 在 list.js 中，引用 name 屬性，
console.log(name)
打印卻發(fā)現(xiàn) name 竟然變成了一個函數(shù)。剛開始小 A 不知所措，后來發(fā)現(xiàn)在小 B 開發(fā)的 home.js 文件中這么寫道：
function name(){
//...
}
而且這個 name 方法被引用了多次，導(dǎo)致一系列的連鎖反應(yīng)。
上述例子就是沒有使用模塊化開發(fā)，造成的全局污染的問題，每個加載的 js 文件都共享變量。當(dāng)然在實際的項目開發(fā)中，可以使用匿名函數(shù)自執(zhí)行的方式，形成獨(dú)立的塊級作用域解決這個問題。
只需要在 home.js 中這么寫道：
(function (){
function name(){
//...
}
})()
這樣小 A 就能正常在 list.js 中獲取 name 屬性。但是這只是一個 demo ，我們不能保證在實際開發(fā)中情況會更加復(fù)雜。所以不使用模塊開發(fā)會暴露出很多風(fēng)險。
依賴管理
依賴管理也是一個難以處理的問題。還是如上的例子，正常情況下，執(zhí)行 js 的先后順序就是 script 標(biāo)簽排列的前后順序。那么如何三個 js 之間有依賴關(guān)系，那么應(yīng)該如何處理呢？
假設(shè)三個 js 中，都有一個公共方法 fun1 ， fun2 ， fun3。三者之間的依賴關(guān)系如下圖所示。
下層 js 能調(diào)用上層 js 的方法，但是上層 js 無法調(diào)用下層 js 的方法。
所以就需要模塊化來解決上述的問題，今天我們就重點講解一下前端模塊化的兩個重要方案：Commonjs 和 Es Module
三 Commonjs
Commonjs 的提出，彌補(bǔ) Javascript 對于模塊化，沒有統(tǒng)一標(biāo)準(zhǔn)的缺陷。nodejs 借鑒了 Commonjs 的 Module ，實現(xiàn)了良好的模塊化管理。
目前 commonjs 廣泛應(yīng)用于以下幾個場景：
Node是 CommonJS 在服務(wù)器端一個具有代表性的實現(xiàn)；Browserify是 CommonJS 在瀏覽器中的一種實現(xiàn)；webpack打包工具對 CommonJS 的支持和轉(zhuǎn)換；也就是前端應(yīng)用也可以在編譯之前，盡情使用 CommonJS 進(jìn)行開發(fā)。
1 commonjs 使用與原理
在使用 規(guī)范下，有幾個顯著的特點。
在 commonjs中每一個 js 文件都是一個單獨(dú)的模塊，我們可以稱之為 module；該模塊中，包含 CommonJS 規(guī)范的核心變量: exports、module.exports、require； exports 和 module.exports 可以負(fù)責(zé)對模塊中的內(nèi)容進(jìn)行導(dǎo)出； require 函數(shù)可以幫助我們導(dǎo)入其他模塊（自定義模塊、系統(tǒng)模塊、第三方庫模塊）中的內(nèi)容；
commonjs 使用初體驗
導(dǎo)出：我們先嘗試這導(dǎo)出一個模塊：
hello.js中
let name = '《React進(jìn)階實踐指南》'
module.exports = function sayName (){
return name
}
導(dǎo)入：接下來簡單的導(dǎo)入：
home.js
const sayName = require('./hello.js')
module.exports = function say(){
return {
name:sayName(),
author:'我不是外星人'
}
}
如上就是 Commonjs 最簡單的實現(xiàn)，那么暴露出兩個問題：
如何解決變量污染的問題。 module.exports，exports，require 三者是如何工作的？又有什么關(guān)系？
commonjs 實現(xiàn)原理
首先從上述得知每個模塊文件上存在 module，exports，require三個變量，然而這三個變量是沒有被定義的，但是我們可以在 Commonjs 規(guī)范下每一個 js 模塊上直接使用它們。在 nodejs 中還存在 __filename 和 __dirname 變量。
如上每一個變量代表什么意思呢：
module記錄當(dāng)前模塊信息。require引入模塊的方法。exports當(dāng)前模塊導(dǎo)出的屬性
在編譯的過程中，實際 Commonjs 對 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ī)范下模塊中，會形成一個包裝函數(shù)，我們寫的代碼將作為包裝函數(shù)的執(zhí)行上下文，使用的 require，exports，module本質(zhì)上是通過形參的方式傳遞到包裝函數(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:'我不是外星人'
}
}
`)
如上模擬了一個包裝函數(shù)功能， script 為我們在 js 模塊中寫的內(nèi)容，最后返回的就是如上包裝之后的函數(shù)。當(dāng)然這個函數(shù)暫且是一個字符串。
runInThisContext(modulefunction)(module.exports, require, module, __filename, __dirname)
在模塊加載的時候，會通過 runInThisContext (可以理解成 eval ) 執(zhí)行 modulefunction，傳入require，exports，module等參數(shù)。最終我們寫的 nodejs 文件就這么執(zhí)行了。
到此為止，完成了整個模塊執(zhí)行的原理。接下來我們來分析以下 require 文件加載的流程。
2 require 文件加載流程
上述說了 commonjs 規(guī)范大致的實現(xiàn)原理，接下來我們分析一下， require 如何進(jìn)行文件的加載的。
我們還是以 nodejs 為參考，比如如下代碼片段中：
const fs = require('fs') // ①核心模塊
const sayName = require('./hello.js') //② 文件模塊
const crypto = require('crypto-js') // ③第三方自定義模塊
如上代碼片段中：
① 為 nodejs 底層的核心模塊。 ② 為我們編寫的文件模塊，比如上述 sayName③ 為我們通過 npm 下載的第三方自定義模塊，比如 crypto-js。
當(dāng) require 方法執(zhí)行的時候，接收的唯一參數(shù)作為一個標(biāo)識符 ，Commonjs 下對不同的標(biāo)識符，處理流程不同，但是目的相同，都是找到對應(yīng)的模塊。
require 加載標(biāo)識符原則
首先我們看一下 nodejs 中對標(biāo)識符的處理原則。
首先像 fs ，http ，path 等標(biāo)識符，會被作為 nodejs 的核心模塊。 ./和../作為相對路徑的文件模塊，/作為絕對路徑的文件模塊。非路徑形式也非核心模塊的模塊，將作為自定義模塊。
核心模塊的處理：
核心模塊的優(yōu)先級僅次于緩存加載，在 Node 源碼編譯中，已被編譯成二進(jìn)制代碼，所以加載核心模塊，加載過程中速度最快。
路徑形式的文件模塊處理：
已 ./ ，../ 和 / 開始的標(biāo)識符，會被當(dāng)作文件模塊處理。require() 方法會將路徑轉(zhuǎn)換成真實路徑，并以真實路徑作為索引，將編譯后的結(jié)果緩存起來，第二次加載的時候會更快。至于怎么緩存的？我們稍后會講到。
自定義模塊處理：自定義模塊，一般指的是非核心的模塊，它可能是一個文件或者一個包，它的查找會遵循以下原則：
在當(dāng)前目錄下的 node_modules目錄查找。如果沒有，在父級目錄的 node_modules查找，如果沒有在父級目錄的父級目錄的node_modules中查找。沿著路徑向上遞歸，直到根目錄下的 node_modules目錄。在查找過程中，會找 package.json下 main 屬性指向的文件，如果沒有package.json，在 node 環(huán)境下會以此查找index.js，index.json，index.node。
查找流程圖如下所示：
3 require 模塊引入與處理
CommonJS 模塊同步加載并執(zhí)行模塊文件，CommonJS 模塊在執(zhí)行階段分析模塊依賴，采用深度優(yōu)先遍歷（depth-first traversal），執(zhí)行順序是父 -> 子 -> 父；
為了搞清除 require 文件引入流程。我們接下來再舉一個例子，這里注意一下細(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)階實踐指南》',
author:'我不是外星人'
}
console.log('我是 b 文件')
module.exports = function(){
return object
}
主文件 main.js
const a = require('./a')
const b = require('./b')
console.log('node 入口文件')
接下來終端輸入 node main.js 運(yùn)行 main.js，效果如下：
從上面的運(yùn)行結(jié)果可以得出以下結(jié)論：
main.js和a.js模塊都引用了b.js模塊，但是b.js模塊只執(zhí)行了一次。a.js模塊 和b.js模塊互相引用，但是沒有造成循環(huán)引用的情況。執(zhí)行順序是父 -> 子 -> 父；
那么 Common.js 規(guī)范是如何實現(xiàn)上述效果的呢？
require 加載原理
首先為了弄清楚上述兩個問題。我們要明白兩個感念，那就是 module 和 Module。
module ：在 Node 中每一個 js 文件都是一個 module ，module 上保存了 exports 等信息之外，還有一個 loaded 表示該模塊是否被加載。
為 false表示還沒有加載；為 true表示已經(jīng)加載
Module ：以 nodejs 為例，整個系統(tǒng)運(yùn)行之后，會用 Module 緩存每一個模塊加載的信息。
require 的源碼大致長如下的樣子：
// id 為路徑標(biāo)識符
function require(id) {
/* 查找 Module 上有沒有已經(jīng)加載的 js 對象*/
const cachedModule = Module._cache[id]
/* 如果已經(jīng)加載了那么直接取走緩存的 exports 對象 */
if(cachedModule){
return cachedModule.exports
}
/* 創(chuàng)建當(dāng)前模塊的 module */
const module = { exports: {} ,loaded: false , ...}
/* 將 module 緩存到 Module 的緩存屬性中，路徑標(biāo)識符作為 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 會接收一個參數(shù)——文件標(biāo)識符，然后分析定位文件，分析過程我們上述已經(jīng)講到了，加下來會從 Module 上查找有沒有緩存，如果有緩存，那么直接返回緩存的內(nèi)容。
如果沒有緩存，會創(chuàng)建一個 module 對象，緩存到 Module 上，然后執(zhí)行文件，加載完文件，將 loaded 屬性設(shè)置為 true ，然后返回 module.exports 對象。借此完成模塊加載流程。
模塊導(dǎo)出就是 return 這個變量的其實跟 a = b 賦值一樣， 基本類型導(dǎo)出的是值， 引用類型導(dǎo)出的是引用地址。
exports 和 module.exports 持有相同引用，因為最后導(dǎo)出的是 module.exports， 所以對 exports 進(jìn)行賦值會導(dǎo)致 exports 操作的不再是 module.exports 的引用。
require 避免重復(fù)加載
從上面我們可以直接得出，require 如何避免重復(fù)加載的，首先加載之后的文件的 module 會被緩存到 Module 上，比如一個模塊已經(jīng) require 引入了 a 模塊，如果另外一個模塊再次引用 a ，那么會直接讀取緩存值 module ，所以無需再次執(zhí)行模塊。
對應(yīng) demo 片段中，首先 main.js 引用了 a.js ，a.js 中 require 了 b.js 此時 b.js 的 module 放入緩存 Module 中，接下來 main.js 再次引用 b.js ，那么直接走的緩存邏輯。所以 b.js 只會執(zhí)行一次，也就是在 a.js 引入的時候。
require 避免循環(huán)引用
那么接下來這個循環(huán)引用問題，也就很容易解決了。為了讓大家更清晰明白，那么我們接下來一起分析整個流程。
① 首先執(zhí)行 node main.js，那么開始執(zhí)行第一行require(a.js)；② 那么首先判斷 a.js有沒有緩存，因為沒有緩存，先加入緩存，然后執(zhí)行文件 a.js （需要注意 是先加入緩存， 后執(zhí)行模塊內(nèi)容）;③ a.js 中執(zhí)行第一行，引用 b.js。 ④ 那么判斷 b.js有沒有緩存，因為沒有緩存，所以加入緩存，然后執(zhí)行 b.js 文件。⑤ b.js 執(zhí)行第一行，再一次循環(huán)引用 require(a.js)此時的 a.js 已經(jīng)加入緩存，直接讀取值。接下來打印console.log('我是 b 文件')，導(dǎo)出方法。⑥ b.js 執(zhí)行完畢，回到 a.js 文件，打印 console.log('我是 a 文件')，導(dǎo)出方法。⑦ 最后回到 main.js，打印console.log('node 入口文件')完成這個流程。
不過這里我們要注意問題：
如上第 ⑤ 的時候，當(dāng)執(zhí)行 b.js 模塊的時候，因為 a.js 還沒有導(dǎo)出 say方法，所以 b.js 同步上下文中，獲取不到 say。
我用一幅流程圖描述上述過程：
為了進(jìn)一步驗證上面所說的，我們改造一下 b.js 如下:
const say = require('./a')
const object = {
name:'《React進(jìn)階實踐指南》',
author:'我不是外星人'
}
console.log('我是 b 文件')
console.log('打印 a 模塊' , say)
setTimeout(()=>{
console.log('異步打印 a 模塊' , say)
},0)
module.exports = function(){
return object
}
打印結(jié)果：
第一次打印 say 為空對象。 第二次打印 say 才看到 b.js 導(dǎo)出的方法。
那么如何獲取到 say 呢，有兩種辦法：
一是用動態(tài)加載 a.js 的方法，馬上就會講到。 二個就是如上放在異步中加載。
我們注意到 a.js 是用 exports.say 方式導(dǎo)出的，如果 a.js 用 module.exports 結(jié)果會有所不同。至于有什么不同，為什么？我接下來會講到。
4 require 動態(tài)加載
上述我們講了 require 查找文件和加載流程。接下來介紹 commonjs 規(guī)范下的 require 的另外一個特性——動態(tài)加載。
require 可以在任意的上下文，動態(tài)加載模塊。我對上述 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 動態(tài)加載 b.js 模塊。然后執(zhí)行在 main.js 中執(zhí)行 a.js 模塊的 say 方法。
打印結(jié)果如下：
require 本質(zhì)上就是一個函數(shù)，那么函數(shù)可以在任意上下文中執(zhí)行，來自由地加載其他模塊的屬性方法。
5 exports 和 module.exports
系統(tǒng)分析完 require ，接下來我們分析一下，exports 和 module.exports，首先看一下兩個的用法。
exports 使用
第一種方式：exportsa.js
exports.name = `《React進(jìn)階實踐指南》`
exports.author = `我不是外星人`
exports.say = function (){
console.log(666)
}
引用
const a = require('./a')
console.log(a)
打印結(jié)果：
exports 就是傳入到當(dāng)前模塊內(nèi)的一個對象，本質(zhì)上就是 module.exports。
問題：為什么 exports={} 直接賦值一個對象就不可以呢？ 比如我們將如上 a.js 修改一下：
exports={
name:'《React進(jìn)階實踐指南》',
author:'我不是外星人',
say(){
console.log(666)
}
}
打印結(jié)果：
理想情況下是通過 exports = {} 直接賦值，不需要在 exports.a = xxx 每一個屬性，但是如上我們看到了這種方式是無效的。為什么會這樣？實際這個是 js 本身的特性決定的。
通過上述講解都知道 exports ， module 和 require 作為形參的方式傳入到 js 模塊中。我們直接 exports = {} 修改 exports ，等于重新賦值了形參，那么會重新賦值一份，但是不會在引用原來的形參。舉一個簡單的例子
function wrap (myExports){
myExports={
name:'我不是外星人'
}
}
let myExports = {
name:'alien'
}
wrap(myExports)
console.log(myExports)
打印：
我們期望修改 myExports ，但是沒有任何作用。
假設(shè) wrap 就是 Commonjs 規(guī)范下的包裝函數(shù)，我們的 js 代碼就是包裝函數(shù)內(nèi)部的內(nèi)容。當(dāng)我們把 myExports 對象傳進(jìn)去，但是直接賦值 myExports = { name:'我不是外星人' } 沒有任何作用，相等于內(nèi)部重新聲明一份 myExports 而和外界的 myExports 斷絕了關(guān)系。所以解釋了為什么不能 exports={...} 直接賦值。
那么解決上述也容易，只需要函數(shù)中像 exports.name 這么寫就可以了。
function wrap (myExports){
myExports.name='我不是外星人'
}
打印：
module.exports 使用
module.exports 本質(zhì)上就是 exports ，我們用 module.exports 來實現(xiàn)如上的導(dǎo)出。
module.exports ={
name:'《React進(jìn)階實踐指南》',
author:'我不是外星人',
say(){
console.log(666)
}
}
module.exports 也可以單獨(dú)導(dǎo)出一個函數(shù)或者一個類。比如如下：
module.exports = function (){
// ...
}
從上述 require 原理實現(xiàn)中，我們知道了 exports 和 module.exports 持有相同引用，因為最后導(dǎo)出的是 module.exports 。那么這就說明在一個文件中，我們最好選擇 exports 和 module.exports 兩者之一，如果兩者同時存在，很可能會造成覆蓋的情況發(fā)生。比如如下情況：
exports.name = 'alien' // 此時 exports.name 是無效的
module.exports ={
name:'《React進(jìn)階實踐指南》',
author:'我不是外星人',
say(){
console.log(666)
}
}
上述情況下 exports.name 無效，會被 module.exports覆蓋。
Q & A
1 那么問題來了？既然有了 exports，為何又出了 module.exports?
答：如果我們不想在 commonjs 中導(dǎo)出對象，而是只導(dǎo)出一個類或者一個函數(shù)再或者其他屬性的情況，那么 module.exports 就更方便了，如上我們知道 exports 會被初始化成一個對象，也就是我們只能在對象上綁定屬性，但是我們可以通過 module.exports 自定義導(dǎo)出出對象外的其他類型元素。
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ù)等非對象屬性的時候，也有一些風(fēng)險，就比如循環(huán)引用的情況下。對象會保留相同的內(nèi)存地址，就算一些屬性是后綁定的，也能間接通過異步形式訪問到。但是如果 module.exports 為一個非對象其他屬性類型，在循環(huán)引用的時候，就容易造成屬性丟失的情況發(fā)生了。
四 Es Module
Nodejs 借鑒了 Commonjs 實現(xiàn)了模塊化 ，從 ES6 開始， JavaScript 才真正意義上有自己的模塊化規(guī)范，
Es Module 的產(chǎn)生有很多優(yōu)勢，比如:
借助 Es Module的靜態(tài)導(dǎo)入導(dǎo)出的優(yōu)勢，實現(xiàn)了tree shaking。Es Module還可以import()懶加載方式實現(xiàn)代碼分割。
在 Es Module 中用 export 用來導(dǎo)出模塊，import 用來導(dǎo)入模塊。但是 export 配合 import 會有很多種組合情況，接下來我們逐一分析一下。
導(dǎo)出 export 和導(dǎo)入 import
所有通過 export 導(dǎo)出的屬性，在 import 中可以通過結(jié)構(gòu)的方式，解構(gòu)出來。
export 正常導(dǎo)出，import 導(dǎo)入
導(dǎo)出模塊：a.js
const name = '《React進(jìn)階實踐指南》'
const author = '我不是外星人'
export { name, author }
export const say = function (){
console.log('hello , world')
}
導(dǎo)入模塊：main.js
// name , author , say 對應(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)部的變量名稱，要與 export { } 完全匹配。
默認(rèn)導(dǎo)出 export default
導(dǎo)出模塊：a.js
const name = '《React進(jìn)階實踐指南》'
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)階實踐指南》',author:'我不是外星人', say:Function }
export default anything導(dǎo)入 module 的默認(rèn)導(dǎo)出。anything可以是函數(shù)，屬性方法，或者對象。對于引入默認(rèn)導(dǎo)出的模塊， import anyName from 'module'， anyName 可以是自定義名稱。
混合導(dǎo)入｜導(dǎo)出
ES6 module 可以使用 export default 和 export 導(dǎo)入多個屬性。
導(dǎo)出模塊：a.js
export const name = '《React進(jìn)階實踐指南》'
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)階實踐指南》"
bookAuthor // "我不是外星人"
)
第二種：
import theSay, * as mes from './a'
console.log(
theSay, // ? say() { console.log('hello , world') }
mes // { name:'《React進(jìn)階實踐指南》' , author: "我不是外星人" ，default: ? say() { console.log('hello , world') } }
)
導(dǎo)出的屬性被合并到 mes屬性上，export被導(dǎo)入到對應(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)階實踐指南》 我不是外星人
從 module 模塊中引入 name ，并重命名為 bookName ，從 module 模塊中引入 author ，并重命名為 bookAuthor。然后在當(dāng)前模塊下，使用被重命名的名字。
重定向?qū)С?/strong>
可以把當(dāng)前模塊作為一個中轉(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 。
無需導(dǎo)入模塊，只運(yùn)行模塊
import 'module'
執(zhí)行 module 不導(dǎo)出值 多次調(diào)用 module只運(yùn)行一次。
動態(tài)導(dǎo)入
const promise = import('module')
import('module')，動態(tài)導(dǎo)入返回一個Promise。為了支持這種方式，需要在 webpack 中做相應(yīng)的配置處理。
ES6 module 特性
接下來我們重點分析一下 ES6 module 一些重要特性。
1 靜態(tài)語法
ES6 module 的引入和導(dǎo)出是靜態(tài)的，import 會自動提升到代碼的頂層 ，import , export 不能放在塊級作用域或條件語句中。
??錯誤寫法一：
function say(){
import name from './a.js'
export const author = '我不是外星人'
}
??錯誤寫法二：
isexport && export const name = '《React進(jìn)階實踐指南》'
這種靜態(tài)語法，在編譯過程中確定了導(dǎo)入和導(dǎo)出的關(guān)系，所以更方便去查找依賴，更方便去 tree shaking (搖樹) ， 可以使用 lint 工具對模塊依賴進(jìn)行檢查，可以對導(dǎo)入導(dǎo)出加上類型信息進(jìn)行靜態(tài)的類型檢查。
import 的導(dǎo)入名不能為字符串或在判斷語句，下面代碼是錯誤的
??錯誤寫法三：
import 'defaultExport' from 'module'
let name = 'Export'
import 'default' + name from 'module'
2 執(zhí)行特性
ES6 module 和 Common.js 一樣，對于相同的 js 文件，會保存靜態(tài)屬性。
但是與 Common.js 不同的是 ，CommonJS 模塊同步加載并執(zhí)行模塊文件，ES6 模塊提前加載并執(zhí)行模塊文件，ES6 模塊在預(yù)處理階段分析模塊依賴，在執(zhí)行階段執(zhí)行模塊，兩個階段都采用深度優(yōu)先遍歷，執(zhí)行順序是子 -> 父。
為了驗證這一點，看一下如下 demo。
main.js
console.log('main.js開始執(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í)行順序是子 -> 父
效果如下：
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
如果直接修改，那么會報錯。如下所示：
屬性綁定
所以可以在 main.js 中這么修改。
import { num , addNumber } from './a'
console.log(num) // num = 1
addNumber()
console.log(num) // num = 2
如上屬性 num 的導(dǎo)入是綁定的。
接下來對 import 屬性作出總結(jié)：
使用 import 被導(dǎo)入的模塊運(yùn)行在嚴(yán)格模式下。 使用 import 被導(dǎo)入的變量是只讀的，可以理解默認(rèn)為 const 裝飾，無法被賦值 使用 import 被導(dǎo)入的變量是與原變量綁定/引用的，可以理解為 import 導(dǎo)入的變量無論是否為基本類型都是引用傳遞。
import() 動態(tài)引入
import() 返回一個 Promise 對象， 返回的 Promise 的 then 成功回調(diào)中，可以獲取模塊的加載成功信息。我們來簡單看一下 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')
}
打印如下：
從打印結(jié)果可以看出 import()的基本特性。
import()可以動態(tài)使用，加載模塊。import()返回一個Promise，成功回調(diào) then 中可以獲取模塊對應(yīng)的信息。name對應(yīng) name 屬性，default代表export default。__esModule為 es module 的標(biāo)識。
import() 可以做一些什么
動態(tài)加載
首先 import()動態(tài)加載一些內(nèi)容，可以放在條件語句或者函數(shù)執(zhí)行上下文中。
if(isRequire){
const result = import('./b')
}
懶加載
import()可以實現(xiàn)懶加載，舉個例子 vue 中的路由懶加載；
[
{
path: 'home',
name: '首頁',
component: ()=> import('./home') ,
},
]
React中動態(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 配合一起用，能夠有動態(tài)加載組件的效果。React.lazy 接受一個函數(shù)，這個函數(shù)需要動態(tài)調(diào)用 import() 。
import() 這種加載效果，可以很輕松的實現(xiàn)代碼分割。避免一次性加載大量 js 文件，造成首次加載白屏?xí)r間過長的情況。
tree shaking 實現(xiàn)
Tree Shaking 在 Webpack 中的實現(xiàn)，是用來盡可能的刪除沒有被使用過的代碼，一些被 import 了但其實沒有被使用的代碼。比如以下場景：
a.js：
export let num = 1
export const addNumber = ()=>{
num++
}
export const delNumber = ()=>{
num--
}
main.js：
import { addNumber } from './a'
addNumber()
如上 a.js中暴露兩個方法，addNumber和delNumber，但是整個應(yīng)用中，只用到了addNumber，那么構(gòu)建打包的時候，delNumber將作為沒有引用的方法，不被打包進(jìn)來。
五 Commonjs 和 Es Module 總結(jié)
接下來貫穿全文，講一下 Commonjs 和 Es Module 的特性。
Commonjs 總結(jié)
Commonjs 的特性如下：
CommonJS 模塊由 JS 運(yùn)行時實現(xiàn)。 CommonJs 是單個值導(dǎo)出，本質(zhì)上導(dǎo)出的就是 exports 屬性。 CommonJS 是可以動態(tài)加載的，對每一個加載都存在緩存，可以有效的解決循環(huán)引用問題。 CommonJS 模塊同步加載并執(zhí)行模塊文件。
es module 總結(jié)
Es module 的特性如下：
ES6 Module 靜態(tài)的，不能放在塊級作用域內(nèi)，代碼發(fā)生在編譯時。 ES6 Module 的值是動態(tài)綁定的，可以通過導(dǎo)出方法修改，可以直接訪問修改結(jié)果。 ES6 Module 可以導(dǎo)出多個屬性和方法，可以單個導(dǎo)入導(dǎo)出，混合導(dǎo)入導(dǎo)出。 ES6 模塊提前加載并執(zhí)行模塊文件， ES6 Module 導(dǎo)入模塊在嚴(yán)格模式下。 ES6 Module 的特性可以很容易實現(xiàn) Tree Shaking 和 Code Splitting。
六 總結(jié)
本文詳細(xì)講解了 Commonjs 和 Es Module ，希望閱讀的同學(xué)能對前端模塊化的實現(xiàn)有更深入的認(rèn)識。吃透本文，能夠輕松應(yīng)付 Commonjs 和 Es Module 的面試知識點。
如果這篇文章對你有幫助，希望能給筆者 點贊+收藏 以此鼓勵作者繼續(xù)創(chuàng)作前端硬核文章。也可以關(guān)注作者公眾號 前端Sharing 第一時間推送前端好文。