深入淺出 Commonjs 和 Es Module

作者：前端Sharing 2021-08-11 07:54:47

本文詳細講解了 Commonjs 和 Es Module ，希望閱讀的同學能對前端模塊化的實現有更深入的認識。吃透本文，能夠輕松應付 Commonjs 和 Es Module 的面試知識點。

[[416716]]

本文轉載自微信公眾號「前端Sharing」，作者前端Sharing。轉載本文請聯系前端Sharing公眾號。

一前言

今天我們來深度分析一下 Commonjs 和 Es Module，希望通過本文的學習，能夠讓大家徹底明白 Commonjs 和 Es Module 原理，能夠一次性搞定面試中遇到的大部分有關 Commonjs 和 Es Module 的問題。

老規矩我們帶上疑問開始今天的分析??????：

1 Commonjs 和 Es Module 有什么區別 ?
2 Commonjs 如何解決的循環引用問題 ?
3 既然有了 exports，為何又出了 module.exports? 既生瑜，何生亮 ?
4 require 模塊查找機制 ?
5 Es Module 如何解決循環引用問題 ?
6 exports = {} 這種寫法為何無效 ?
7 關于 import() 的動態引入 ?
8 Es Module 如何改變模塊下的私有變量 ?
9 ...

ps:由于作者前一段時間在寫《React進階實踐指南》小冊，沒有時間持續輸出高質量文章，接下來我會回歸創作高質量技術文章，送人玫瑰，手有余香，希望閱讀的朋友能給作者點個贊??，鼓勵我持續創作。

二模塊化

早期 JavaScript 開發很容易存在全局污染和依賴管理混亂問題。這些問題在多人開發前端應用的情況下變得更加棘手。我這里例舉一個很常見的場景：

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

如上在沒有模塊化的前提下，如果在 html 中這么寫，那么就會暴露一系列問題。

全局污染

沒有模塊化，那么 script 內部的變量是可以相互污染的。比如有一種場景，如上 ./index.js 文件和 ./list.js 文件為小 A 開發的，./home.js 為小 B 開發的。

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

var name = '我不是外星人'

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

console.log(name)

打印卻發現 name 竟然變成了一個函數。剛開始小 A 不知所措，后來發現在小 B 開發的 home.js 文件中這么寫道：

function name(){ 
    //... 
}

而且這個 name 方法被引用了多次，導致一系列的連鎖反應。

上述例子就是沒有使用模塊化開發，造成的全局污染的問題，每個加載的 js 文件都共享變量。當然在實際的項目開發中，可以使用匿名函數自執行的方式，形成獨立的塊級作用域解決這個問題。

只需要在 home.js 中這么寫道：

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

這樣小 A 就能正常在 list.js 中獲取 name 屬性。但是這只是一個 demo ，我們不能保證在實際開發中情況會更加復雜。所以不使用模塊開發會暴露出很多風險。

依賴管理

依賴管理也是一個難以處理的問題。還是如上的例子，正常情況下，執行 js 的先后順序就是 script 標簽排列的前后順序。那么如何三個 js 之間有依賴關系，那么應該如何處理呢?

假設三個 js 中，都有一個公共方法 fun1 ， fun2 ， fun3。三者之間的依賴關系如下圖所示。

下層 js 能調用上層 js 的方法，但是上層 js 無法調用下層 js 的方法。

所以就需要模塊化來解決上述的問題，今天我們就重點講解一下前端模塊化的兩個重要方案：Commonjs 和 Es Module

三 Commonjs

Commonjs 的提出，彌補 Javascript 對于模塊化，沒有統一標準的缺陷。nodejs 借鑒了 Commonjs 的 Module ，實現了良好的模塊化管理。

目前 commonjs 廣泛應用于以下幾個場景：

Node 是 CommonJS 在服務器端一個具有代表性的實現;
Browserify 是 CommonJS 在瀏覽器中的一種實現;
webpack 打包工具對 CommonJS 的支持和轉換;也就是前端應用也可以在編譯之前，盡情使用 CommonJS 進行開發。

1 commonjs 使用與原理

在使用規范下，有幾個顯著的特點。

在 commonjs 中每一個 js 文件都是一個單獨的模塊，我們可以稱之為 module;
該模塊中，包含 CommonJS 規范的核心變量: exports、module.exports、require;
exports 和 module.exports 可以負責對模塊中的內容進行導出;
require 函數可以幫助我們導入其他模塊(自定義模塊、系統模塊、第三方庫模塊)中的內容;

commonjs 使用初體驗

導出：我們先嘗試這導出一個模塊：

hello.js中

let name = '《React進階實踐指南》' 
module.exports = function sayName  (){ 
    return name 
}

導入：接下來簡單的導入：

home.js

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

如上就是 Commonjs 最簡單的實現，那么暴露出兩個問題：

如何解決變量污染的問題。
module.exports，exports，require 三者是如何工作的?又有什么關系?

commonjs 實現原理

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

如上每一個變量代表什么意思呢：

module 記錄當前模塊信息。
require 引入模塊的方法。
exports 當前模塊導出的屬性

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

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

在 Commonjs 規范下模塊中，會形成一個包裝函數，我們寫的代碼將作為包裝函數的執行上下文，使用的 require ，exports ，module 本質上是通過形參的方式傳遞到包裝函數中的。

那么包裝函數本質上是什么樣子的呢?

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

包裝函數執行。

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

如上模擬了一個包裝函數功能， script 為我們在 js 模塊中寫的內容，最后返回的就是如上包裝之后的函數。當然這個函數暫且是一個字符串。

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

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

到此為止，完成了整個模塊執行的原理。接下來我們來分析以下 require 文件加載的流程。

2 require 文件加載流程

上述說了 commonjs 規范大致的實現原理，接下來我們分析一下， require 如何進行文件的加載的。

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

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

如上代碼片段中：

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

當 require 方法執行的時候，接收的唯一參數作為一個標識符，Commonjs 下對不同的標識符，處理流程不同，但是目的相同，都是找到對應的模塊。

require 加載標識符原則

首先我們看一下 nodejs 中對標識符的處理原則。

首先像 fs ，http ，path 等標識符，會被作為 nodejs 的核心模塊。
./ 和 ../ 作為相對路徑的文件模塊， / 作為絕對路徑的文件模塊。
非路徑形式也非核心模塊的模塊，將作為自定義模塊。

核心模塊的處理：

核心模塊的優先級僅次于緩存加載，在 Node 源碼編譯中，已被編譯成二進制代碼，所以加載核心模塊，加載過程中速度最快。

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

已 ./ ，../ 和 / 開始的標識符，會被當作文件模塊處理。require() 方法會將路徑轉換成真實路徑，并以真實路徑作為索引，將編譯后的結果緩存起來，第二次加載的時候會更快。至于怎么緩存的?我們稍后會講到。

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

在當前目錄下的 node_modules 目錄查找。
如果沒有，在父級目錄的 node_modules 查找，如果沒有在父級目錄的父級目錄的 node_modules 中查找。
沿著路徑向上遞歸，直到根目錄下的 node_modules 目錄。
在查找過程中，會找 package.json 下 main 屬性指向的文件，如果沒有 package.json ，在 node 環境下會以此查找 index.js ，index.json ，index.node。

查找流程圖如下所示：

3 require 模塊引入與處理

CommonJS 模塊同步加載并執行模塊文件，CommonJS 模塊在執行階段分析模塊依賴，采用深度優先遍歷(depth-first traversal)，執行順序是父 -> 子 -> 父;

為了搞清除 require 文件引入流程。我們接下來再舉一個例子，這里注意一下細節：

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進階實踐指南》', 
   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 運行 main.js，效果如下：

從上面的運行結果可以得出以下結論：

main.js 和 a.js 模塊都引用了 b.js 模塊，但是 b.js 模塊只執行了一次。
a.js 模塊和 b.js 模塊互相引用，但是沒有造成循環引用的情況。
執行順序是父 -> 子 -> 父;

那么 Common.js 規范是如何實現上述效果的呢?

require 加載原理

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

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

為 false 表示還沒有加載;
為 true 表示已經加載

Module ：以 nodejs 為例，整個系統運行之后，會用 Module 緩存每一個模塊加載的信息。

require 的源碼大致長如下的樣子：

 // id 為路徑標識符 
function require(id) { 
   /* 查找  Module 上有沒有已經加載的 js  對象*/ 
   const  cachedModule = Module._cache[id] 
    
   /* 如果已經加載了那么直接取走緩存的 exports 對象  */ 
  if(cachedModule){ 
    return cachedModule.exports 
  } 
  
  /* 創建當前模塊的 module  */ 
  const module = { exports: {} ,loaded: false , ...} 
 
  /* 將 module 緩存到  Module 的緩存屬性中，路徑標識符作為 id */   
  Module._cache[id] = module 
  /* 加載文件 */ 
  runInThisContext(wrapper('module.exports = "123"'))(module.exports, require, module, __filename, __dirname) 
  /* 加載完成 *// 
  module.loaded = true  
  /* 返回值 */ 
  return module.exports 
}

從上面我們總結出一次 require 大致流程是這樣的;

require 會接收一個參數——文件標識符，然后分析定位文件，分析過程我們上述已經講到了，加下來會從 Module 上查找有沒有緩存，如果有緩存，那么直接返回緩存的內容。
如果沒有緩存，會創建一個 module 對象，緩存到 Module 上，然后執行文件，加載完文件，將 loaded 屬性設置為 true ，然后返回 module.exports 對象。借此完成模塊加載流程。
模塊導出就是 return 這個變量的其實跟 a = b 賦值一樣，基本類型導出的是值，引用類型導出的是引用地址。
exports 和 module.exports 持有相同引用，因為最后導出的是 module.exports，所以對 exports 進行賦值會導致 exports 操作的不再是 module.exports 的引用。

require 避免重復加載

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

對應 demo 片段中，首先 main.js 引用了 a.js ，a.js 中 require 了 b.js 此時 b.js 的 module 放入緩存 Module 中，接下來 main.js 再次引用 b.js ，那么直接走的緩存邏輯。所以 b.js 只會執行一次，也就是在 a.js 引入的時候。

require 避免循環引用

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

① 首先執行 node main.js ，那么開始執行第一行 require(a.js);
② 那么首先判斷 a.js 有沒有緩存，因為沒有緩存，先加入緩存，然后執行文件 a.js (需要注意是先加入緩存，后執行模塊內容);
③ a.js 中執行第一行，引用 b.js。
④ 那么判斷 b.js 有沒有緩存，因為沒有緩存，所以加入緩存，然后執行 b.js 文件。
⑤ b.js 執行第一行，再一次循環引用 require(a.js) 此時的 a.js 已經加入緩存，直接讀取值。接下來打印 console.log('我是 b 文件')，導出方法。
⑥ b.js 執行完畢，回到 a.js 文件，打印 console.log('我是 a 文件')，導出方法。
⑦ 最后回到 main.js，打印 console.log('node 入口文件') 完成這個流程。

不過這里我們要注意問題：

如上第 ⑤ 的時候，當執行 b.js 模塊的時候，因為 a.js 還沒有導出 say 方法，所以 b.js 同步上下文中，獲取不到 say。

我用一幅流程圖描述上述過程：

為了進一步驗證上面所說的，我們改造一下 b.js 如下:

const say = require('./a') 
const  object = { 
   name:'《React進階實踐指南》', 
   author:'我不是外星人' 
} 
console.log('我是 b 文件') 
console.log('打印 a 模塊' , say) 
 
setTimeout(()=>{ 
    console.log('異步打印 a 模塊' , say) 
},0) 
 
module.exports = function(){ 
    return object 
}

打印結果：

第一次打印 say 為空對象。
第二次打印 say 才看到 b.js 導出的方法。

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

一是用動態加載 a.js 的方法，馬上就會講到。
二個就是如上放在異步中加載。

我們注意到 a.js 是用 exports.say 方式導出的，如果 a.js 用 module.exports 結果會有所不同。至于有什么不同，為什么?我接下來會講到。

4 require 動態加載

上述我們講了 require 查找文件和加載流程。接下來介紹 commonjs 規范下的 require 的另外一個特性——動態加載。

require 可以在任意的上下文，動態加載模塊。我對上述 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 函數中，用 require 動態加載 b.js 模塊。然后執行在 main.js 中執行 a.js 模塊的 say 方法。

打印結果如下：

require 本質上就是一個函數，那么函數可以在任意上下文中執行，來自由地加載其他模塊的屬性方法。

5 exports 和 module.exports

系統分析完 require ，接下來我們分析一下，exports 和 module.exports，首先看一下兩個的用法。

exports 使用

第一種方式：exportsa.js

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

引用

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

打印結果：

exports 就是傳入到當前模塊內的一個對象，本質上就是 module.exports。

問題：為什么 exports={} 直接賦值一個對象就不可以呢? 比如我們將如上 a.js 修改一下：

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

打印結果：

理想情況下是通過 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 ，但是沒有任何作用。

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

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

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

打印：

module.exports 使用

module.exports 本質上就是 exports ，我們用 module.exports 來實現如上的導出。

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

module.exports 也可以單獨導出一個函數或者一個類。比如如下：

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

從上述 require 原理實現中，我們知道了 exports 和 module.exports 持有相同引用，因為最后導出的是 module.exports 。那么這就說明在一個文件中，我們最好選擇 exports 和 module.exports 兩者之一，如果兩者同時存在，很可能會造成覆蓋的情況發生。比如如下情況：

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

上述情況下 exports.name 無效，會被 module.exports 覆蓋。

Q & A

1 那么問題來了?既然有了 exports，為何又出了 module.exports?

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

let a = 1 
module.exports = a // 導出函數 
 
module.exports = [1,2,3] // 導出數組 
 
module.exports = function(){} //導出方法

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

答：module.exports 當導出一些函數等非對象屬性的時候，也有一些風險，就比如循環引用的情況下。對象會保留相同的內存地址，就算一些屬性是后綁定的，也能間接通過異步形式訪問到。但是如果 module.exports 為一個非對象其他屬性類型，在循環引用的時候，就容易造成屬性丟失的情況發生了。

四 Es Module

Nodejs 借鑒了 Commonjs 實現了模塊化，從 ES6 開始， JavaScript 才真正意義上有自己的模塊化規范，

Es Module 的產生有很多優勢，比如:

借助 Es Module 的靜態導入導出的優勢，實現了 tree shaking。
Es Module 還可以 import() 懶加載方式實現代碼分割。

在 Es Module 中用 export 用來導出模塊，import 用來導入模塊。但是 export 配合 import 會有很多種組合情況，接下來我們逐一分析一下。

導出 export 和導入 import

所有通過 export 導出的屬性，在 import 中可以通過結構的方式，解構出來。

export 正常導出，import 導入

導出模塊：a.js

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

導入模塊：main.js

// name , author , say 對應 a.js 中的  name , author , say 
import { name , author , say } from './a.js'

export { }，與變量名綁定，命名導出。
import { } from 'module'，導入 module 的命名導出，module 為如上的 ./a.js
這種情況下 import { } 內部的變量名稱，要與 export { } 完全匹配。

默認導出 export default

導出模塊：a.js

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

導入模塊：main.js

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

export default anything 導入 module 的默認導出。anything 可以是函數，屬性方法，或者對象。
對于引入默認導出的模塊，import anyName from 'module'， anyName 可以是自定義名稱。

混合導入|導出

ES6 module 可以使用 export default 和 export 導入多個屬性。

導出模塊：a.js

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

導入模塊：main.js 中有幾種導入方式：

第一種：

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

第二種：

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

導出的屬性被合并到 mes 屬性上， export 被導入到對應的屬性上，export default 導出內容被綁定到 default 屬性上。theSay 也可以作為被 export default 導出屬性。

重屬名導入

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

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

重定向導出

可以把當前模塊作為一個中轉站，一方面引入 module 內的屬性，然后把屬性再給導出去。

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

第一種方式：重定向導出 module 中的所有導出屬性，但是不包括 module 內的 default 屬性。
第二種方式：從 module 中導入 name ，author ，say 再以相同的屬性名，導出。
第三種方式：從 module 中導入 name ，重屬名為 bookName 導出，從 module 中導入 author ，重屬名為 bookAuthor 導出，正常導出 say 。

無需導入模塊，只運行模塊

import 'module'

執行 module 不導出值多次調用 module 只運行一次。

動態導入

const promise = import('module')

import('module')，動態導入返回一個 Promise。為了支持這種方式，需要在 webpack 中做相應的配置處理。

ES6 module 特性

接下來我們重點分析一下 ES6 module 一些重要特性。

1 靜態語法

ES6 module 的引入和導出是靜態的，import 會自動提升到代碼的頂層，import , export 不能放在塊級作用域或條件語句中。

錯誤寫法一：

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

錯誤寫法二：

isexport &&  export const  name = '《React進階實踐指南》'

這種靜態語法，在編譯過程中確定了導入和導出的關系，所以更方便去查找依賴，更方便去 tree shaking (搖樹) ，可以使用 lint 工具對模塊依賴進行檢查，可以對導入導出加上類型信息進行靜態的類型檢查。

import 的導入名不能為字符串或在判斷語句，下面代碼是錯誤的

錯誤寫法三：

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

2 執行特性

ES6 module 和 Common.js 一樣，對于相同的 js 文件，會保存靜態屬性。

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

為了驗證這一點，看一下如下 demo。

main.js

console.log('main.js開始執行') 
import say from './a' 
import say1 from './b' 
console.log('main.js執行完畢')

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 模塊也只加載了一次。
執行順序是子 -> 父

效果如下：

3 導出綁定

不能修改import導入的屬性

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 的導入是綁定的。

接下來對 import 屬性作出總結：

使用 import 被導入的模塊運行在嚴格模式下。
使用 import 被導入的變量是只讀的，可以理解默認為 const 裝飾，無法被賦值
使用 import 被導入的變量是與原變量綁定/引用的，可以理解為 import 導入的變量無論是否為基本類型都是引用傳遞。

import() 動態引入

import() 返回一個 Promise 對象，返回的 Promise 的 then 成功回調中，可以獲取模塊的加載成功信息。我們來簡單看一下 import() 是如何使用的。

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') 
}

打印如下：

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

import() 可以動態使用，加載模塊。
import() 返回一個 Promise ，成功回調 then 中可以獲取模塊對應的信息。name 對應 name 屬性， default 代表 export default 。__esModule 為 es module 的標識。

import() 可以做一些什么

動態加載

首先 import() 動態加載一些內容，可以放在條件語句或者函數執行上下文中。

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

懶加載

import() 可以實現懶加載，舉個例子 vue 中的路由懶加載;

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

React中動態加載

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 配合一起用，能夠有動態加載組件的效果。React.lazy 接受一個函數，這個函數需要動態調用 import() 。

import() 這種加載效果，可以很輕松的實現代碼分割。避免一次性加載大量 js 文件，造成首次加載白屏時間過長的情況。

tree shaking 實現

Tree Shaking 在 Webpack 中的實現，是用來盡可能的刪除沒有被使用過的代碼，一些被 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，但是整個應用中，只用到了 addNumber，那么構建打包的時候，delNumber將作為沒有引用的方法，不被打包進來。

五 Commonjs 和 Es Module 總結

接下來貫穿全文，講一下 Commonjs 和 Es Module 的特性。

Commonjs 總結

Commonjs 的特性如下：

CommonJS 模塊由 JS 運行時實現。
CommonJs 是單個值導出，本質上導出的就是 exports 屬性。
CommonJS 是可以動態加載的，對每一個加載都存在緩存，可以有效的解決循環引用問題。
CommonJS 模塊同步加載并執行模塊文件。

es module 總結

Es module 的特性如下：

ES6 Module 靜態的，不能放在塊級作用域內，代碼發生在編譯時。
ES6 Module 的值是動態綁定的，可以通過導出方法修改，可以直接訪問修改結果。
ES6 Module 可以導出多個屬性和方法，可以單個導入導出，混合導入導出。
ES6 模塊提前加載并執行模塊文件，
ES6 Module 導入模塊在嚴格模式下。
ES6 Module 的特性可以很容易實現 Tree Shaking 和 Code Splitting。

六總結

責任編輯：武曉燕來源：前端Sharing

Commonjs

深入淺出 Commonjs 和 Es Module

[[416716]]

一 前言

二 模塊化

全局污染

依賴管理

三 Commonjs

1 commonjs 使用與原理

2 require 文件加載流程

3 require 模塊引入與處理

4 require 動態加載

5 exports 和 module.exports

四 Es Module

導出 export 和導入 import

ES6 module 特性

五 Commonjs 和 Es Module 總結

Commonjs 總結

es module 總結

六 總結

一前言

二模塊化

六總結