【原理級別】深入淺出 Commonjs 和 Es Module

一 前言

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

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

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。三者之間的依賴關係如下圖所示。

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

三 Commonjs

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

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

1 commonjs 使用與原理

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

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 最簡單的實現，那麼暴露出兩個問題：

commonjs 實現原理

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

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

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

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

那麼包裝函數本質上是什麼樣子的呢？

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:'我不是外星人'
        }
    }
`)
 runInThisContext(modulefunction)(module.exports, require, module, __filename, __dirname)

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

2 require 文件加載流程

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

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

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

如上代碼片段中：

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

require 加載標識符原則

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

核心模塊的處理：

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

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

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

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

查找流程圖如下所示：

3 require 模塊引入與處理

CommonJS 模塊同步加載並執行模塊文件，CommonJS 模塊在執行階段分析模塊依賴，採用深度優先遍歷（depth-first traversal），執行順序是父 -> 子 -> 父；

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

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

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

接下來終端輸入 node main.js 運行 main.js，效果如下：

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

那麼 Common.js 規範是如何實現上述效果的呢？

require 加載原理

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

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

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 避免重複加載

從上面我們可以直接得出，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 避免循環引用

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

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

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

爲了進一步驗證上面所說的，我們改造一下 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 呢，有兩種辦法：

我們注意到 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()

打印結果如下：

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={} 直接賦值一個對象就不可以呢？ 比如我們將如上 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)
    }
}

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 中用 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 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 }

混合導入｜導出

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

重屬名導入

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

重定向導出

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

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

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

import 'module'

動態導入

const promise = import('module')

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

效果如下：

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

接下來對 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() 可以做一些什麼

動態加載

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

懶加載

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

React 中動態加載

const LazyComponent =  React.lazy(()=>import('./text'))
class index extends React.Component{   
    render(){
        return <React.Suspense fallback={ <div class><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()

五 Commonjs 和 Es Module 總結

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

Commonjs 總結

Commonjs 的特性如下：

es module 總結

Es module 的特性如下：

六 總結

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

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/keI1DyU9_vUoB15et4IoPA

猜你喜歡