「萬字進階」深刻淺出 Commonjs 和 Es Module

一前言

今天咱們來深度分析一下 Commonjs 和 Es Module，但願經過本文的學習，可以讓你們完全明白 Commonjs 和 Es Module 原理，可以一次性搞定面試中遇到的大部分有關 Commonjs 和 Es Module 的問題。html

老規矩咱們帶上疑問開始今天的分析🤔🤔🤔：前端

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進階實踐指南》小冊，沒有時間持續輸出高質量文章，接下來我會迴歸創做高質量技術文章，送人玫瑰，手有餘香，但願閱讀的朋友能給做者點個贊👍，鼓勵我持續創做。vue

二模塊化

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

<body>
  <script src="./index.js"></script>
  <script src="./home.js"></script>
  <script src="./list.js"></script>
</body>
複製代碼

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

全局污染

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

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

var name = '我不是外星人'
複製代碼

而後小 A 在 list.js 中，引用 name 屬性，npm

console.log(name)
複製代碼

打印卻發現 name 居然變成了一個函數。剛開始小 A 不知所措，後來發如今小 B 開發的 home.js 文件中這麼寫道：json

function name(){
    //...
}
複製代碼

並且這個 name 方法被引用了屢次，致使一系列的連鎖反應。segmentfault

上述例子就是沒有使用模塊化開發，形成的全局污染的問題，每一個加載的 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 使用

第一種方式：exports a.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 {  name as bookName , say,  author as bookAuthor  } 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 {   name as bookName ,  author as bookAuthor , ..., 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() 是如何使用的。

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')
}
複製代碼

打印以下：

從打印結果能夠看出 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。

六總結

本文詳細講解了 Commonjs 和 Es Module ，但願閱讀的同窗能對前端模塊化的實現有更深刻的認識。吃透本文，可以輕鬆應付 Commonjs 和 Es Module 的面試知識點。

若是這篇文章對你有幫助，但願能給筆者 點贊+收藏 以此鼓勵做者繼續創做前端硬核文章。也能夠關注做者公衆號 前端Sharing 第一時間推送前端好文。

參考文獻

小冊完結撒花，是終點亦是起點～

系統學習 React 的掘金小冊——《React進階實踐指南》已經完結啦～

是終點亦是起點, 小冊內容將持續更新，隨着 React 版本升級持續維護，並有持續更新章節～

提早透露，小冊接下來會補充：React context 原理部分，內容補充到第八章。

奉上幾個小冊 7 折優惠碼 F3Z1VXtv ，先到先得哦～

「萬字進階」深刻淺出 Commonjs 和 Es Module

一 前言

二 模塊化

三 Commonjs

1 commonjs 使用與原理

commonjs 使用初體驗

commonjs 實現原理

2 require 文件加載流程

require 加載標識符原則

3 require 模塊引入與處理

require 加載原理

require 避免重複加載

require 避免循環引用

4 require 動態加載

5 exports 和 module.exports

exports 使用

module.exports 使用

Q & A

四 Es Module

導出 export 和導入 import

ES6 module 特性

1 靜態語法

2 執行特性

3 導出綁定

import() 動態引入

import() 能夠作一些什麼

tree shaking 實現

五 Commonjs 和 Es Module 總結

Commonjs 總結

es module 總結

六 總結

參考文獻

小冊完結撒花，是終點亦是起點～

一前言

二模塊化

六總結