一 前言
今天我們來深度分析一下 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 …
二 模塊化
早期 JavaScript 開發很容易存在全局污染和依賴管理混亂問題。這些問題在多人開發前端應用的情況下變得更加棘手。我這里例舉一個很常見的場景：
js復制代碼<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 屬性是一個字符串。
js
復制代碼var name = '我不是外星人'
然后小 A 在 list.js 中，引用 name 屬性，
js
復制代碼console.log(name)
打印卻發現 name 竟然變成了一個函數。剛開始小 A 不知所措，后來發現在小 B 開發的 home.js 文件中這么寫道：
js復制代碼function name(){//...
}
而且這個 name 方法被引用了多次，導致一系列的連鎖反應。
上述例子就是沒有使用模塊化開發，造成的全局污染的問題，每個加載的 js 文件都共享變量。當然在實際的項目開發中，可以使用匿名函數自執行的方式，形成獨立的塊級作用域解決這個問題。
只需要在 home.js 中這么寫道：
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中
js復制代碼let name = '《React進階實踐指南》'
module.exports = function sayName (){return name
}
導入：接下來簡單的導入：
home.js
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 為例子🌰，它被包裝之后的樣子如下：
js復制代碼(function(exports,require,module,__filename,__dirname){const sayName = require('./hello.js')module.exports = function say(){return {name:sayName(),author:'我不是外星人'}}
})
- 在 Commonjs 規范下模塊中，會形成一個包裝函數，我們寫的代碼將作為包裝函數的執行上下文，使用的
require，exports，module本質上是通過形參的方式傳遞到包裝函數中的。
那么包裝函數本質上是什么樣子的呢？
js復制代碼function wrapper (script) {return '(function (exports, require, module, __filename, __dirname) {' + script +'\n})'
}
包裝函數執行。
js復制代碼const modulefunction = wrapper(`const sayName = require('./hello.js')module.exports = function say(){return {name:sayName(),author:'我不是外星人'}}
`)
- 如上模擬了一個包裝函數功能， script 為我們在 js 模塊中寫的內容，最后返回的就是如上包裝之后的函數。當然這個函數暫且是一個字符串。
js
復制代碼 runInThisContext(modulefunction)(module.exports, require, module, __filename, __dirname)
- 在模塊加載的時候，會通過 runInThisContext (可以理解成 eval ) 執行
modulefunction，傳入require，exports，module等參數。最終我們寫的 nodejs 文件就這么執行了。
到此為止，完成了整個模塊執行的原理。接下來我們來分析以下 require 文件加載的流程。
2 require 文件加載流程
上述說了 commonjs 規范大致的實現原理，接下來我們分析一下， require 如何進行文件的加載的。
我們還是以 nodejs 為參考，比如如下代碼片段中：
js復制代碼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文件
js復制代碼const getMes = require('./b')
console.log('我是 a 文件')
exports.say = function(){const message = getMes()console.log(message)
}
b.js文件
js復制代碼const say = require('./a')
const object = {name:'《React進階實踐指南》',author:'我不是外星人'
}
console.log('我是 b 文件')
module.exports = function(){return object
}
- 主文件
main.js
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 的源碼大致長如下的樣子：
js復制代碼 // 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 如下:
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：
js復制代碼console.log('我是 a 文件')
exports.say = function(){const getMes = require('./b')const message = getMes()console.log(message)
}
main.js：
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
js復制代碼exports.name = `《React進階實踐指南》`
exports.author = `我不是外星人`
exports.say = function (){console.log(666)
}
引用
js復制代碼const a = require('./a')
console.log(a)
打印結果：
- exports 就是傳入到當前模塊內的一個對象，本質上就是
module.exports。
問題：為什么 exports={} 直接賦值一個對象就不可以呢？ 比如我們將如上 a.js 修改一下：
js復制代碼exports={name:'《React進階實踐指南》',author:'我不是外星人',say(){console.log(666)}
}
打印結果：
理想情況下是通過 exports = {} 直接賦值，不需要在 exports.a = xxx 每一個屬性，但是如上我們看到了這種方式是無效的。為什么會這樣？實際這個是 js 本身的特性決定的。
通過上述講解都知道 exports ， module 和 require 作為形參的方式傳入到 js 模塊中。我們直接 exports = {} 修改 exports ，等于重新賦值了形參，那么會重新賦值一份，但是不會在引用原來的形參。舉一個簡單的例子
js復制代碼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 這么寫就可以了。
js復制代碼function wrap (myExports){myExports.name='我不是外星人'
}
打印：
module.exports 使用
module.exports 本質上就是 exports ，我們用 module.exports 來實現如上的導出。
js復制代碼module.exports ={name:'《React進階實踐指南》',author:'我不是外星人',say(){console.log(666)}
}
module.exports 也可以單獨導出一個函數或者一個類。比如如下：
js復制代碼module.exports = function (){// ...
}
從上述 require 原理實現中，我們知道了 exports 和 module.exports 持有相同引用，因為最后導出的是 module.exports 。那么這就說明在一個文件中，我們最好選擇 exports 和 module.exports 兩者之一，如果兩者同時存在，很可能會造成覆蓋的情況發生。比如如下情況：
js復制代碼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 自定義導出出對象外的其他類型元素。
js復制代碼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
js復制代碼const name = '《React進階實踐指南》'
const author = '我不是外星人'
export { name, author }
export const say = function (){console.log('hello , world')
}
導入模塊：main.js
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
js復制代碼const name = '《React進階實踐指南》'
const author = '我不是外星人'
const say = function (){console.log('hello , world')
}
export default {name,author,say
}
導入模塊：main.js
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
js復制代碼export const name = '《React進階實踐指南》'
export const author = '我不是外星人'export default function say (){console.log('hello , world')
}
導入模塊：main.js 中有幾種導入方式：
第一種：
js復制代碼import theSay , { name, author as bookAuthor } from './a.js'
console.log(theSay, // ? say() {console.log('hello , world') }name, // "《React進階實踐指南》"bookAuthor // "我不是外星人"
)
第二種：
js復制代碼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導出屬性。
重屬名導入
js復制代碼import { name as bookName , say, author as bookAuthor } from 'module'
console.log( bookName , bookAuthor , say ) //《React進階實踐指南》 我不是外星人
- 從 module 模塊中引入 name ，并重命名為 bookName ，從 module 模塊中引入 author ，并重命名為 bookAuthor。 然后在當前模塊下，使用被重命名的名字。
重定向導出
可以把當前模塊作為一個中轉站，一方面引入 module 內的屬性，然后把屬性再給導出去。
js復制代碼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 。
無需導入模塊，只運行模塊
js
復制代碼import 'module'
- 執行 module 不導出值 多次調用
module只運行一次。
動態導入
js
復制代碼const promise = import('module')
import('module')，動態導入返回一個Promise。為了支持這種方式，需要在 webpack 中做相應的配置處理。
ES6 module 特性
接下來我們重點分析一下 ES6 module 一些重要特性。
1 靜態語法
ES6 module 的引入和導出是靜態的，import 會自動提升到代碼的頂層 ，import , export 不能放在塊級作用域或條件語句中。
🙅錯誤寫法一：
js復制代碼function say(){import name from './a.js' export const author = '我不是外星人'
}
🙅錯誤寫法二：
js
復制代碼isexport && export const name = '《React進階實踐指南》'
這種靜態語法，在編譯過程中確定了導入和導出的關系，所以更方便去查找依賴，更方便去 tree shaking (搖樹) ， 可以使用 lint 工具對模塊依賴進行檢查，可以對導入導出加上類型信息進行靜態的類型檢查。
import 的導入名不能為字符串或在判斷語句，下面代碼是錯誤的
🙅錯誤寫法三：
js復制代碼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
js復制代碼console.log('main.js開始執行')
import say from './a'
import say1 from './b'
console.log('main.js執行完畢')
a.js
js復制代碼import b from './b'
console.log('a模塊加載')
export default function say (){console.log('hello , world')
}
b.js
js復制代碼console.log('b模塊加載')
export default function sayhello(){console.log('hello,world')
}
main.js和a.js都引用了b.js模塊，但是 b 模塊也只加載了一次。- 執行順序是子 -> 父
效果如下：
3 導出綁定
不能修改import導入的屬性
a.js
js復制代碼export let num = 1
export const addNumber = ()=>{num++
}
main.js中
js復制代碼import { num , addNumber } from './a'
num = 2
如果直接修改，那么會報錯。如下所示：
屬性綁定
所以可以在 main.js 中這么修改。
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
js復制代碼setTimeout(() => {const result = import('./b')result.then(res=>{console.log(res)})
}, 0);
b.js
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()動態加載一些內容，可以放在條件語句或者函數執行上下文中。
js復制代碼if(isRequire){const result = import('./b')
}
懶加載
import()可以實現懶加載，舉個例子 vue 中的路由懶加載；
js復制代碼[{path: 'home',name: '首頁',component: ()=> import('./home') ,},
]
React中動態加載
js復制代碼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：
js復制代碼export let num = 1
export const addNumber = ()=>{num++
}
export const delNumber = ()=>{num--
}
main.js：
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 模塊同步加載并執行模塊文件。
es6 module 總結
Es6 module 的特性如下：
- ES6 Module 靜態的，不能放在塊級作用域內，代碼發生在編譯時。
- ES6 Module 的值是動態綁定的，可以通過導出方法修改，可以直接訪問修改結果。
- ES6 Module 可以導出多個屬性和方法，可以單個導入導出，混合導入導出。
- ES6 模塊提前加載并執行模塊文件，
- ES6 Module 導入模塊在嚴格模式下。
- ES6 Module 的特性可以很容易實現 Tree Shaking 和 Code Splitting。
ing 實現
Tree Shaking 在 Webpack 中的實現，是用來盡可能的刪除沒有被使用過的代碼，一些被 import 了但其實沒有被使用的代碼。比如以下場景：
a.js：
js復制代碼export let num = 1
export const addNumber = ()=>{num++
}
export const delNumber = ()=>{num--
}
main.js：
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。
