深入淺出 Commonjs 和 Es Module
本文轉載自微信公眾號「前端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)
打?。?/p>
我們期望修改 myExports ，但是沒有任何作用。
假設 wrap 就是 Commonjs 規范下的包裝函數，我們的 js 代碼就是包裝函數內部的內容。當我們把 myExports 對象傳進去，但是直接賦值 myExports = { name:'我不是外星人' } 沒有任何作用，相等于內部重新聲明一份 myExports 而和外界的 myExports 斷絕了關系。所以解釋了為什么不能 exports={...} 直接賦值。
那么解決上述也容易，只需要函數中像 exports.name 這么寫就可以了。
- function wrap (myExports){
- myExports.name='我不是外星人'
- }
打?。?/p>
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。
六 總結
本文詳細講解了 Commonjs 和 Es Module ，希望閱讀的同學能對前端模塊化的實現有更深入的認識。吃透本文，能夠輕松應付 Commonjs 和 Es Module 的面試知識點。
