深入淺出 Commonjs 和 Es Module
本文轉(zhuǎn)載自微信公眾號(hào)「前端Sharing」，作者前端Sharing。轉(zhuǎn)載本文請(qǐng)聯(lián)系前端Sharing公眾號(hào)。
一 前言
今天我們來(lái)深度分析一下 Commonjs 和 Es Module，希望通過(guò)本文的學(xué)習(xí)，能夠讓大家徹底明白 Commonjs 和 Es Module 原理，能夠一次性搞定面試中遇到的大部分有關(guān) Commonjs 和 Es Module 的問(wèn)題。
老規(guī)矩我們帶上疑問(wèn)開(kāi)始今天的分析??????：
- 1 Commonjs 和 Es Module 有什么區(qū)別 ?
- 2 Commonjs 如何解決的循環(huán)引用問(wèn)題 ?
- 3 既然有了 exports，為何又出了 module.exports? 既生瑜，何生亮 ?
- 4 require 模塊查找機(jī)制 ?
- 5 Es Module 如何解決循環(huán)引用問(wèn)題 ?
- 6 exports = {} 這種寫(xiě)法為何無(wú)效 ?
- 7 關(guān)于 import() 的動(dòng)態(tài)引入 ?
- 8 Es Module 如何改變模塊下的私有變量 ?
- 9 ...
ps:由于作者前一段時(shí)間在寫(xiě)《React進(jìn)階實(shí)踐指南》小冊(cè)，沒(méi)有時(shí)間持續(xù)輸出高質(zhì)量文章，接下來(lái)我會(huì)回歸創(chuàng)作高質(zhì)量技術(shù)文章，送人玫瑰，手有余香，希望閱讀的朋友能給作者點(diǎn)個(gè)贊??，鼓勵(lì)我持續(xù)創(chuàng)作。
二 模塊化
早期 JavaScript 開(kāi)發(fā)很容易存在全局污染和依賴管理混亂問(wèn)題。這些問(wèn)題在多人開(kāi)發(fā)前端應(yīng)用的情況下變得更加棘手。我這里例舉一個(gè)很常見(jiàn)的場(chǎng)景：
- <body>
- <script src="./index.js"></script>
- <script src="./home.js"></script>
- <script src="./list.js"></script>
- </body>
如上在沒(méi)有模塊化的前提下，如果在 html 中這么寫(xiě)，那么就會(huì)暴露一系列問(wèn)題。
全局污染
沒(méi)有模塊化，那么 script 內(nèi)部的變量是可以相互污染的。比如有一種場(chǎng)景，如上 ./index.js 文件和 ./list.js 文件為小 A 開(kāi)發(fā)的，./home.js 為小 B 開(kāi)發(fā)的。
小 A 在 index.js中聲明 name 屬性是一個(gè)字符串。
- var name = '我不是外星人'
然后小 A 在 list.js 中，引用 name 屬性，
- console.log(name)
打印卻發(fā)現(xiàn) name 竟然變成了一個(gè)函數(shù)。剛開(kāi)始小 A 不知所措，后來(lái)發(fā)現(xiàn)在小 B 開(kāi)發(fā)的 home.js 文件中這么寫(xiě)道：
- function name(){
- //...
- }
而且這個(gè) name 方法被引用了多次，導(dǎo)致一系列的連鎖反應(yīng)。
上述例子就是沒(méi)有使用模塊化開(kāi)發(fā)，造成的全局污染的問(wèn)題，每個(gè)加載的 js 文件都共享變量。當(dāng)然在實(shí)際的項(xiàng)目開(kāi)發(fā)中，可以使用匿名函數(shù)自執(zhí)行的方式，形成獨(dú)立的塊級(jí)作用域解決這個(gè)問(wèn)題。
只需要在 home.js 中這么寫(xiě)道：
- (function (){
- function name(){
- //...
- }
- })()
這樣小 A 就能正常在 list.js 中獲取 name 屬性。但是這只是一個(gè) demo ，我們不能保證在實(shí)際開(kāi)發(fā)中情況會(huì)更加復(fù)雜。所以不使用模塊開(kāi)發(fā)會(huì)暴露出很多風(fēng)險(xiǎn)。
依賴管理
依賴管理也是一個(gè)難以處理的問(wèn)題。還是如上的例子，正常情況下，執(zhí)行 js 的先后順序就是 script 標(biāo)簽排列的前后順序。那么如何三個(gè) js 之間有依賴關(guān)系，那么應(yīng)該如何處理呢?
假設(shè)三個(gè) js 中，都有一個(gè)公共方法 fun1 ， fun2 ， fun3。三者之間的依賴關(guān)系如下圖所示。
- 下層 js 能調(diào)用上層 js 的方法，但是上層 js 無(wú)法調(diào)用下層 js 的方法。
所以就需要模塊化來(lái)解決上述的問(wèn)題，今天我們就重點(diǎn)講解一下前端模塊化的兩個(gè)重要方案：Commonjs 和 Es Module
三 Commonjs
Commonjs 的提出，彌補(bǔ) Javascript 對(duì)于模塊化，沒(méi)有統(tǒng)一標(biāo)準(zhǔn)的缺陷。nodejs 借鑒了 Commonjs 的 Module ，實(shí)現(xiàn)了良好的模塊化管理。
目前 commonjs 廣泛應(yīng)用于以下幾個(gè)場(chǎng)景：
- Node 是 CommonJS 在服務(wù)器端一個(gè)具有代表性的實(shí)現(xiàn);
- Browserify 是 CommonJS 在瀏覽器中的一種實(shí)現(xiàn);
- webpack 打包工具對(duì) CommonJS 的支持和轉(zhuǎn)換;也就是前端應(yīng)用也可以在編譯之前，盡情使用 CommonJS 進(jìn)行開(kāi)發(fā)。
1 commonjs 使用與原理
在使用 規(guī)范下，有幾個(gè)顯著的特點(diǎn)。
- 在 commonjs 中每一個(gè) js 文件都是一個(gè)單獨(dú)的模塊，我們可以稱之為 module;
- 該模塊中，包含 CommonJS 規(guī)范的核心變量: exports、module.exports、require;
- exports 和 module.exports 可以負(fù)責(zé)對(duì)模塊中的內(nèi)容進(jìn)行導(dǎo)出;
- require 函數(shù)可以幫助我們導(dǎo)入其他模塊(自定義模塊、系統(tǒng)模塊、第三方庫(kù)模塊)中的內(nèi)容;
commonjs 使用初體驗(yàn)
導(dǎo)出：我們先嘗試這導(dǎo)出一個(gè)模塊：
hello.js中
- let name = '《React進(jìn)階實(shí)踐指南》'
- module.exports = function sayName (){
- return name
- }
導(dǎo)入：接下來(lái)簡(jiǎn)單的導(dǎo)入：
home.js
- const sayName = require('./hello.js')
- module.exports = function say(){
- return {
- name:sayName(),
- author:'我不是外星人'
- }
- }
如上就是 Commonjs 最簡(jiǎn)單的實(shí)現(xiàn)，那么暴露出兩個(gè)問(wèn)題：
- 如何解決變量污染的問(wèn)題。
- module.exports，exports，require 三者是如何工作的?又有什么關(guān)系?
commonjs 實(shí)現(xiàn)原理
首先從上述得知每個(gè)模塊文件上存在 module，exports，require三個(gè)變量，然而這三個(gè)變量是沒(méi)有被定義的，但是我們可以在 Commonjs 規(guī)范下每一個(gè) js 模塊上直接使用它們。在 nodejs 中還存在 __filename 和 __dirname 變量。
如上每一個(gè)變量代表什么意思呢：
- module 記錄當(dāng)前模塊信息。
- require 引入模塊的方法。
- exports 當(dāng)前模塊導(dǎo)出的屬性
在編譯的過(guò)程中，實(shí)際 Commonjs 對(duì) js 的代碼塊進(jìn)行了首尾包裝， 我們以上述的 home.js 為例子??，它被包裝之后的樣子如下：
- (function(exports,require,module,__filename,__dirname){
- const sayName = require('./hello.js')
- module.exports = function say(){
- return {
- name:sayName(),
- author:'我不是外星人'
- }
- }
- })
- 在 Commonjs 規(guī)范下模塊中，會(huì)形成一個(gè)包裝函數(shù)，我們寫(xiě)的代碼將作為包裝函數(shù)的執(zhí)行上下文，使用的 require ，exports ，module 本質(zhì)上是通過(guò)形參的方式傳遞到包裝函數(shù)中的。
那么包裝函數(shù)本質(zhì)上是什么樣子的呢?
- function wrapper (script) {
- return '(function (exports, require, module, __filename, __dirname) {' +
- script +
- '\n})'
- }
包裝函數(shù)執(zhí)行。
- const modulefunction = wrapper(`
- const sayName = require('./hello.js')
- module.exports = function say(){
- return {
- name:sayName(),
- author:'我不是外星人'
- }
- }
- `)
- 如上模擬了一個(gè)包裝函數(shù)功能， script 為我們?cè)?js 模塊中寫(xiě)的內(nèi)容，最后返回的就是如上包裝之后的函數(shù)。當(dāng)然這個(gè)函數(shù)暫且是一個(gè)字符串。
- runInThisContext(modulefunction)(module.exports, require, module, __filename, __dirname)
在模塊加載的時(shí)候，會(huì)通過(guò) runInThisContext (可以理解成 eval ) 執(zhí)行 modulefunction ，傳入require ，exports ，module 等參數(shù)。最終我們寫(xiě)的 nodejs 文件就這么執(zhí)行了。
到此為止，完成了整個(gè)模塊執(zhí)行的原理。接下來(lái)我們來(lái)分析以下 require 文件加載的流程。
2 require 文件加載流程
上述說(shuō)了 commonjs 規(guī)范大致的實(shí)現(xiàn)原理，接下來(lái)我們分析一下， require 如何進(jìn)行文件的加載的。
我們還是以 nodejs 為參考，比如如下代碼片段中：
- const fs = require('fs') // ①核心模塊
- const sayName = require('./hello.js') //② 文件模塊
- const crypto = require('crypto-js') // ③第三方自定義模塊
如上代碼片段中：
- ① 為 nodejs 底層的核心模塊。
- ② 為我們編寫(xiě)的文件模塊，比如上述 sayName
- ③ 為我們通過(guò) npm 下載的第三方自定義模塊，比如 crypto-js。
當(dāng) require 方法執(zhí)行的時(shí)候，接收的唯一參數(shù)作為一個(gè)標(biāo)識(shí)符 ，Commonjs 下對(duì)不同的標(biāo)識(shí)符，處理流程不同，但是目的相同，都是找到對(duì)應(yīng)的模塊。
require 加載標(biāo)識(shí)符原則
首先我們看一下 nodejs 中對(duì)標(biāo)識(shí)符的處理原則。
- 首先像 fs ，http ，path 等標(biāo)識(shí)符，會(huì)被作為 nodejs 的核心模塊。
- ./ 和 ../ 作為相對(duì)路徑的文件模塊， / 作為絕對(duì)路徑的文件模塊。
- 非路徑形式也非核心模塊的模塊，將作為自定義模塊。
核心模塊的處理：
核心模塊的優(yōu)先級(jí)僅次于緩存加載，在 Node 源碼編譯中，已被編譯成二進(jìn)制代碼，所以加載核心模塊，加載過(guò)程中速度最快。
路徑形式的文件模塊處理：
已 ./ ，../ 和 / 開(kāi)始的標(biāo)識(shí)符，會(huì)被當(dāng)作文件模塊處理。require() 方法會(huì)將路徑轉(zhuǎn)換成真實(shí)路徑，并以真實(shí)路徑作為索引，將編譯后的結(jié)果緩存起來(lái)，第二次加載的時(shí)候會(huì)更快。至于怎么緩存的?我們稍后會(huì)講到。
自定義模塊處理：自定義模塊，一般指的是非核心的模塊，它可能是一個(gè)文件或者一個(gè)包，它的查找會(huì)遵循以下原則：
- 在當(dāng)前目錄下的 node_modules 目錄查找。
- 如果沒(méi)有，在父級(jí)目錄的 node_modules 查找，如果沒(méi)有在父級(jí)目錄的父級(jí)目錄的 node_modules 中查找。
- 沿著路徑向上遞歸，直到根目錄下的 node_modules 目錄。
- 在查找過(guò)程中，會(huì)找 package.json 下 main 屬性指向的文件，如果沒(méi)有 package.json ，在 node 環(huán)境下會(huì)以此查找 index.js ，index.json ，index.node。
查找流程圖如下所示：
3 require 模塊引入與處理
CommonJS 模塊同步加載并執(zhí)行模塊文件，CommonJS 模塊在執(zhí)行階段分析模塊依賴，采用深度優(yōu)先遍歷(depth-first traversal)，執(zhí)行順序是父 -> 子 -> 父;
為了搞清除 require 文件引入流程。我們接下來(lái)再舉一個(gè)例子，這里注意一下細(xì)節(jié)：
- 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進(jìn)階實(shí)踐指南》',
- author:'我不是外星人'
- }
- console.log('我是 b 文件')
- module.exports = function(){
- return object
- }
- 主文件main.js
- const a = require('./a')
- const b = require('./b')
- console.log('node 入口文件')
接下來(lái)終端輸入 node main.js 運(yùn)行 main.js，效果如下：
從上面的運(yùn)行結(jié)果可以得出以下結(jié)論：
- main.js 和 a.js 模塊都引用了 b.js 模塊，但是 b.js 模塊只執(zhí)行了一次。
- a.js 模塊 和 b.js 模塊互相引用，但是沒(méi)有造成循環(huán)引用的情況。
- 執(zhí)行順序是父 -> 子 -> 父;
那么 Common.js 規(guī)范是如何實(shí)現(xiàn)上述效果的呢?
require 加載原理
首先為了弄清楚上述兩個(gè)問(wèn)題。我們要明白兩個(gè)感念，那就是 module 和 Module。
module ：在 Node 中每一個(gè) js 文件都是一個(gè) module ，module 上保存了 exports 等信息之外，還有一個(gè) loaded 表示該模塊是否被加載。
- 為 false 表示還沒(méi)有加載;
- 為 true 表示已經(jīng)加載
Module ：以 nodejs 為例，整個(gè)系統(tǒng)運(yùn)行之后，會(huì)用 Module 緩存每一個(gè)模塊加載的信息。
require 的源碼大致長(zhǎng)如下的樣子：
- // id 為路徑標(biāo)識(shí)符
- function require(id) {
- /* 查找 Module 上有沒(méi)有已經(jīng)加載的 js 對(duì)象*/
- const cachedModule = Module._cache[id]
- /* 如果已經(jīng)加載了那么直接取走緩存的 exports 對(duì)象 */
- if(cachedModule){
- return cachedModule.exports
- }
- /* 創(chuàng)建當(dāng)前模塊的 module */
- const module = { exports: {} ,loaded: false , ...}
- /* 將 module 緩存到 Module 的緩存屬性中，路徑標(biāo)識(shí)符作為 id */
- Module._cache[id] = module
- /* 加載文件 */
- runInThisContext(wrapper('module.exports = "123"'))(module.exports, require, module, __filename, __dirname)
- /* 加載完成 *//
- module.loaded = true
- /* 返回值 */
- return module.exports
- }
從上面我們總結(jié)出一次 require 大致流程是這樣的;
- require 會(huì)接收一個(gè)參數(shù)——文件標(biāo)識(shí)符，然后分析定位文件，分析過(guò)程我們上述已經(jīng)講到了，加下來(lái)會(huì)從 Module 上查找有沒(méi)有緩存，如果有緩存，那么直接返回緩存的內(nèi)容。
- 如果沒(méi)有緩存，會(huì)創(chuàng)建一個(gè) module 對(duì)象，緩存到 Module 上，然后執(zhí)行文件，加載完文件，將 loaded 屬性設(shè)置為 true ，然后返回 module.exports 對(duì)象。借此完成模塊加載流程。
- 模塊導(dǎo)出就是 return 這個(gè)變量的其實(shí)跟 a = b 賦值一樣， 基本類型導(dǎo)出的是值， 引用類型導(dǎo)出的是引用地址。
- exports 和 module.exports 持有相同引用，因?yàn)樽詈髮?dǎo)出的是 module.exports， 所以對(duì) exports 進(jìn)行賦值會(huì)導(dǎo)致 exports 操作的不再是 module.exports 的引用。
require 避免重復(fù)加載
從上面我們可以直接得出，require 如何避免重復(fù)加載的，首先加載之后的文件的 module 會(huì)被緩存到 Module 上，比如一個(gè)模塊已經(jīng) require 引入了 a 模塊，如果另外一個(gè)模塊再次引用 a ，那么會(huì)直接讀取緩存值 module ，所以無(wú)需再次執(zhí)行模塊。
對(duì)應(yīng) demo 片段中，首先 main.js 引用了 a.js ，a.js 中 require 了 b.js 此時(shí) b.js 的 module 放入緩存 Module 中，接下來(lái) main.js 再次引用 b.js ，那么直接走的緩存邏輯。所以 b.js 只會(huì)執(zhí)行一次，也就是在 a.js 引入的時(shí)候。
require 避免循環(huán)引用
那么接下來(lái)這個(gè)循環(huán)引用問(wèn)題，也就很容易解決了。為了讓大家更清晰明白，那么我們接下來(lái)一起分析整個(gè)流程。
- ① 首先執(zhí)行 node main.js ，那么開(kāi)始執(zhí)行第一行 require(a.js);
- ② 那么首先判斷 a.js 有沒(méi)有緩存，因?yàn)闆](méi)有緩存，先加入緩存，然后執(zhí)行文件 a.js (需要注意 是先加入緩存， 后執(zhí)行模塊內(nèi)容);
- ③ a.js 中執(zhí)行第一行，引用 b.js。
- ④ 那么判斷 b.js 有沒(méi)有緩存，因?yàn)闆](méi)有緩存，所以加入緩存，然后執(zhí)行 b.js 文件。
- ⑤ b.js 執(zhí)行第一行，再一次循環(huán)引用 require(a.js) 此時(shí)的 a.js 已經(jīng)加入緩存，直接讀取值。接下來(lái)打印 console.log('我是 b 文件')，導(dǎo)出方法。
- ⑥ b.js 執(zhí)行完畢，回到 a.js 文件，打印 console.log('我是 a 文件')，導(dǎo)出方法。
- ⑦ 最后回到 main.js，打印 console.log('node 入口文件') 完成這個(gè)流程。
不過(guò)這里我們要注意問(wèn)題：
- 如上第 ⑤ 的時(shí)候，當(dāng)執(zhí)行 b.js 模塊的時(shí)候，因?yàn)?a.js 還沒(méi)有導(dǎo)出 say 方法，所以 b.js 同步上下文中，獲取不到 say。
我用一幅流程圖描述上述過(guò)程：
為了進(jìn)一步驗(yàn)證上面所說(shuō)的，我們改造一下 b.js 如下:
- const say = require('./a')
- const object = {
- name:'《React進(jìn)階實(shí)踐指南》',
- author:'我不是外星人'
- }
- console.log('我是 b 文件')
- console.log('打印 a 模塊' , say)
- setTimeout(()=>{
- console.log('異步打印 a 模塊' , say)
- },0)
- module.exports = function(){
- return object
- }
打印結(jié)果：
- 第一次打印 say 為空對(duì)象。
- 第二次打印 say 才看到 b.js 導(dǎo)出的方法。
那么如何獲取到 say 呢，有兩種辦法：
- 一是用動(dòng)態(tài)加載 a.js 的方法，馬上就會(huì)講到。
- 二個(gè)就是如上放在異步中加載。
我們注意到 a.js 是用 exports.say 方式導(dǎo)出的，如果 a.js 用 module.exports 結(jié)果會(huì)有所不同。至于有什么不同，為什么?我接下來(lái)會(huì)講到。
4 require 動(dòng)態(tài)加載
上述我們講了 require 查找文件和加載流程。接下來(lái)介紹 commonjs 規(guī)范下的 require 的另外一個(gè)特性——動(dòng)態(tài)加載。
require 可以在任意的上下文，動(dòng)態(tài)加載模塊。我對(duì)上述 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 函數(shù)中，用 require 動(dòng)態(tài)加載 b.js 模塊。然后執(zhí)行在 main.js 中執(zhí)行 a.js 模塊的 say 方法。
打印結(jié)果如下：
require 本質(zhì)上就是一個(gè)函數(shù)，那么函數(shù)可以在任意上下文中執(zhí)行，來(lái)自由地加載其他模塊的屬性方法。
5 exports 和 module.exports
系統(tǒng)分析完 require ，接下來(lái)我們分析一下，exports 和 module.exports，首先看一下兩個(gè)的用法。
exports 使用
第一種方式：exportsa.js
- exports.name = `《React進(jìn)階實(shí)踐指南》`
- exports.author = `我不是外星人`
- exports.say = function (){
- console.log(666)
- }
引用
- const a = require('./a')
- console.log(a)
打印結(jié)果：
- exports 就是傳入到當(dāng)前模塊內(nèi)的一個(gè)對(duì)象，本質(zhì)上就是 module.exports。
問(wèn)題：為什么 exports={} 直接賦值一個(gè)對(duì)象就不可以呢? 比如我們將如上 a.js 修改一下：
- exports={
- name:'《React進(jìn)階實(shí)踐指南》',
- author:'我不是外星人',
- say(){
- console.log(666)
- }
- }
打印結(jié)果：
理想情況下是通過(guò) exports = {} 直接賦值，不需要在 exports.a = xxx 每一個(gè)屬性，但是如上我們看到了這種方式是無(wú)效的。為什么會(huì)這樣?實(shí)際這個(gè)是 js 本身的特性決定的。
通過(guò)上述講解都知道 exports ， module 和 require 作為形參的方式傳入到 js 模塊中。我們直接 exports = {} 修改 exports ，等于重新賦值了形參，那么會(huì)重新賦值一份，但是不會(huì)在引用原來(lái)的形參。舉一個(gè)簡(jiǎn)單的例子
- function wrap (myExports){
- myExports={
- name:'我不是外星人'
- }
- }
- let myExports = {
- name:'alien'
- }
- wrap(myExports)
- console.log(myExports)
打?。?/p>
我們期望修改 myExports ，但是沒(méi)有任何作用。
假設(shè) wrap 就是 Commonjs 規(guī)范下的包裝函數(shù)，我們的 js 代碼就是包裝函數(shù)內(nèi)部的內(nèi)容。當(dāng)我們把 myExports 對(duì)象傳進(jìn)去，但是直接賦值 myExports = { name:'我不是外星人' } 沒(méi)有任何作用，相等于內(nèi)部重新聲明一份 myExports 而和外界的 myExports 斷絕了關(guān)系。所以解釋了為什么不能 exports={...} 直接賦值。
那么解決上述也容易，只需要函數(shù)中像 exports.name 這么寫(xiě)就可以了。
- function wrap (myExports){
- myExports.name='我不是外星人'
- }
打印：
module.exports 使用
module.exports 本質(zhì)上就是 exports ，我們用 module.exports 來(lái)實(shí)現(xiàn)如上的導(dǎo)出。
- module.exports ={
- name:'《React進(jìn)階實(shí)踐指南》',
- author:'我不是外星人',
- say(){
- console.log(666)
- }
- }
module.exports 也可以單獨(dú)導(dǎo)出一個(gè)函數(shù)或者一個(gè)類。比如如下：
- module.exports = function (){
- // ...
- }
從上述 require 原理實(shí)現(xiàn)中，我們知道了 exports 和 module.exports 持有相同引用，因?yàn)樽詈髮?dǎo)出的是 module.exports 。那么這就說(shuō)明在一個(gè)文件中，我們最好選擇 exports 和 module.exports 兩者之一，如果兩者同時(shí)存在，很可能會(huì)造成覆蓋的情況發(fā)生。比如如下情況：
- exports.name = 'alien' // 此時(shí) exports.name 是無(wú)效的
- module.exports ={
- name:'《React進(jìn)階實(shí)踐指南》',
- author:'我不是外星人',
- say(){
- console.log(666)
- }
- }
上述情況下 exports.name 無(wú)效，會(huì)被 module.exports 覆蓋。
Q & A
1 那么問(wèn)題來(lái)了?既然有了 exports，為何又出了 module.exports?
答：如果我們不想在 commonjs 中導(dǎo)出對(duì)象，而是只導(dǎo)出一個(gè)類或者一個(gè)函數(shù)再或者其他屬性的情況，那么 module.exports 就更方便了，如上我們知道 exports 會(huì)被初始化成一個(gè)對(duì)象，也就是我們只能在對(duì)象上綁定屬性，但是我們可以通過(guò) module.exports 自定義導(dǎo)出出對(duì)象外的其他類型元素。
- let a = 1
- module.exports = a // 導(dǎo)出函數(shù)
- module.exports = [1,2,3] // 導(dǎo)出數(shù)組
- module.exports = function(){} //導(dǎo)出方法
2 與 exports 相比，module.exports 有什么缺陷 ?
答：module.exports 當(dāng)導(dǎo)出一些函數(shù)等非對(duì)象屬性的時(shí)候，也有一些風(fēng)險(xiǎn)，就比如循環(huán)引用的情況下。對(duì)象會(huì)保留相同的內(nèi)存地址，就算一些屬性是后綁定的，也能間接通過(guò)異步形式訪問(wèn)到。但是如果 module.exports 為一個(gè)非對(duì)象其他屬性類型，在循環(huán)引用的時(shí)候，就容易造成屬性丟失的情況發(fā)生了。
四 Es Module
Nodejs 借鑒了 Commonjs 實(shí)現(xiàn)了模塊化 ，從 ES6 開(kāi)始， JavaScript 才真正意義上有自己的模塊化規(guī)范，
Es Module 的產(chǎn)生有很多優(yōu)勢(shì)，比如:
- 借助 Es Module 的靜態(tài)導(dǎo)入導(dǎo)出的優(yōu)勢(shì)，實(shí)現(xiàn)了 tree shaking。
- Es Module 還可以 import() 懶加載方式實(shí)現(xiàn)代碼分割。
在 Es Module 中用 export 用來(lái)導(dǎo)出模塊，import 用來(lái)導(dǎo)入模塊。但是 export 配合 import 會(huì)有很多種組合情況，接下來(lái)我們逐一分析一下。
導(dǎo)出 export 和導(dǎo)入 import
所有通過(guò) export 導(dǎo)出的屬性，在 import 中可以通過(guò)結(jié)構(gòu)的方式，解構(gòu)出來(lái)。
export 正常導(dǎo)出，import 導(dǎo)入
導(dǎo)出模塊：a.js
- const name = '《React進(jìn)階實(shí)踐指南》'
- const author = '我不是外星人'
- export { name, author }
- export const say = function (){
- console.log('hello , world')
- }
導(dǎo)入模塊：main.js
- // name , author , say 對(duì)應(yīng) a.js 中的 name , author , say
- import { name , author , say } from './a.js'
- export { }， 與變量名綁定，命名導(dǎo)出。
- import { } from 'module'， 導(dǎo)入 module 的命名導(dǎo)出 ，module 為如上的 ./a.js
- 這種情況下 import { } 內(nèi)部的變量名稱，要與 export { } 完全匹配。
默認(rèn)導(dǎo)出 export default
導(dǎo)出模塊：a.js
- const name = '《React進(jìn)階實(shí)踐指南》'
- const author = '我不是外星人'
- const say = function (){
- console.log('hello , world')
- }
- export default {
- name,
- author,
- say
- }
導(dǎo)入模塊：main.js
- import mes from './a.js'
- console.log(mes) //{ name: '《React進(jìn)階實(shí)踐指南》',author:'我不是外星人', say:Function }
- export default anything 導(dǎo)入 module 的默認(rèn)導(dǎo)出。anything 可以是函數(shù)，屬性方法，或者對(duì)象。
- 對(duì)于引入默認(rèn)導(dǎo)出的模塊，import anyName from 'module'， anyName 可以是自定義名稱。
混合導(dǎo)入|導(dǎo)出
ES6 module 可以使用 export default 和 export 導(dǎo)入多個(gè)屬性。
導(dǎo)出模塊：a.js
- export const name = '《React進(jìn)階實(shí)踐指南》'
- export const author = '我不是外星人'
- export default function say (){
- console.log('hello , world')
- }
導(dǎo)入模塊：main.js 中有幾種導(dǎo)入方式：
第一種：
- import theSay , { name, author as bookAuthor } from './a.js'
- console.log(
- theSay, // ƒ say() {console.log('hello , world') }
- name, // "《React進(jìn)階實(shí)踐指南》"
- bookAuthor // "我不是外星人"
- )
第二種：
- import theSay, * as mes from './a'
- console.log(
- theSay, // ƒ say() { console.log('hello , world') }
- mes // { name:'《React進(jìn)階實(shí)踐指南》' , author: "我不是外星人" ，default: ƒ say() { console.log('hello , world') } }
- )
- 導(dǎo)出的屬性被合并到 mes 屬性上， export 被導(dǎo)入到對(duì)應(yīng)的屬性上，export default 導(dǎo)出內(nèi)容被綁定到 default 屬性上。theSay 也可以作為被 export default 導(dǎo)出屬性。
重屬名導(dǎo)入
- import { bookName as name, say, bookAuthor as author } from 'module'
- console.log( bookName , bookAuthor , say ) //《React進(jìn)階實(shí)踐指南》 我不是外星人
- 從 module 模塊中引入 name ，并重命名為 bookName ，從 module 模塊中引入 author ，并重命名為 bookAuthor。然后在當(dāng)前模塊下，使用被重命名的名字。
重定向?qū)С?/strong>
可以把當(dāng)前模塊作為一個(gè)中轉(zhuǎn)站，一方面引入 module 內(nèi)的屬性，然后把屬性再給導(dǎo)出去。
- export * from 'module' // 第一種方式
- export { name, author, ..., say } from 'module' // 第二種方式
- export { bookName as name, bookAuthor as author, ..., say } from 'module' //第三種方式
- 第一種方式：重定向?qū)С?module 中的所有導(dǎo)出屬性， 但是不包括 module 內(nèi)的 default 屬性。
- 第二種方式：從 module 中導(dǎo)入 name ，author ，say 再以相同的屬性名，導(dǎo)出。
- 第三種方式：從 module 中導(dǎo)入 name ，重屬名為 bookName 導(dǎo)出，從 module 中導(dǎo)入 author ，重屬名為 bookAuthor 導(dǎo)出，正常導(dǎo)出 say 。
無(wú)需導(dǎo)入模塊，只運(yùn)行模塊
- import 'module'
- 執(zhí)行 module 不導(dǎo)出值 多次調(diào)用 module 只運(yùn)行一次。
動(dòng)態(tài)導(dǎo)入
- const promise = import('module')
- import('module')，動(dòng)態(tài)導(dǎo)入返回一個(gè) Promise。為了支持這種方式，需要在 webpack 中做相應(yīng)的配置處理。
ES6 module 特性
接下來(lái)我們重點(diǎn)分析一下 ES6 module 一些重要特性。
1 靜態(tài)語(yǔ)法
ES6 module 的引入和導(dǎo)出是靜態(tài)的，import 會(huì)自動(dòng)提升到代碼的頂層 ，import , export 不能放在塊級(jí)作用域或條件語(yǔ)句中。
錯(cuò)誤寫(xiě)法一：
- function say(){
- import name from './a.js'
- export const author = '我不是外星人'
- }
錯(cuò)誤寫(xiě)法二：
- isexport && export const name = '《React進(jìn)階實(shí)踐指南》'
這種靜態(tài)語(yǔ)法，在編譯過(guò)程中確定了導(dǎo)入和導(dǎo)出的關(guān)系，所以更方便去查找依賴，更方便去 tree shaking (搖樹(shù)) ， 可以使用 lint 工具對(duì)模塊依賴進(jìn)行檢查，可以對(duì)導(dǎo)入導(dǎo)出加上類型信息進(jìn)行靜態(tài)的類型檢查。
import 的導(dǎo)入名不能為字符串或在判斷語(yǔ)句，下面代碼是錯(cuò)誤的
錯(cuò)誤寫(xiě)法三：
- import 'defaultExport' from 'module'
- let name = 'Export'
- import 'default' + name from 'module'
2 執(zhí)行特性
ES6 module 和 Common.js 一樣，對(duì)于相同的 js 文件，會(huì)保存靜態(tài)屬性。
但是與 Common.js 不同的是 ，CommonJS 模塊同步加載并執(zhí)行模塊文件，ES6 模塊提前加載并執(zhí)行模塊文件，ES6 模塊在預(yù)處理階段分析模塊依賴，在執(zhí)行階段執(zhí)行模塊，兩個(gè)階段都采用深度優(yōu)先遍歷，執(zhí)行順序是子 -> 父。
為了驗(yàn)證這一點(diǎn)，看一下如下 demo。
main.js
- console.log('main.js開(kāi)始執(zhí)行')
- import say from './a'
- import say1 from './b'
- console.log('main.js執(zhí)行完畢')
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 模塊也只加載了一次。
- 執(zhí)行順序是子 -> 父
效果如下：
3 導(dǎo)出綁定
不能修改import導(dǎo)入的屬性
a.js
- export let num = 1
- export const addNumber = ()=>{
- num++
- }
main.js中
- import { num , addNumber } from './a'
- num = 2
如果直接修改，那么會(huì)報(bào)錯(cuò)。如下所示：
屬性綁定
所以可以在 main.js 中這么修改。
- import { num , addNumber } from './a'
- console.log(num) // num = 1
- addNumber()
- console.log(num) // num = 2
- 如上屬性 num 的導(dǎo)入是綁定的。
接下來(lái)對(duì) import 屬性作出總結(jié)：
- 使用 import 被導(dǎo)入的模塊運(yùn)行在嚴(yán)格模式下。
- 使用 import 被導(dǎo)入的變量是只讀的，可以理解默認(rèn)為 const 裝飾，無(wú)法被賦值
- 使用 import 被導(dǎo)入的變量是與原變量綁定/引用的，可以理解為 import 導(dǎo)入的變量無(wú)論是否為基本類型都是引用傳遞。
import() 動(dòng)態(tài)引入
import() 返回一個(gè) Promise 對(duì)象， 返回的 Promise 的 then 成功回調(diào)中，可以獲取模塊的加載成功信息。我們來(lái)簡(jiǎn)單看一下 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')
- }
打印如下：
從打印結(jié)果可以看出 import()的基本特性。
- import() 可以動(dòng)態(tài)使用，加載模塊。
- import() 返回一個(gè) Promise ，成功回調(diào) then 中可以獲取模塊對(duì)應(yīng)的信息。name 對(duì)應(yīng) name 屬性， default 代表 export default 。__esModule 為 es module 的標(biāo)識(shí)。
import() 可以做一些什么
動(dòng)態(tài)加載
- 首先 import() 動(dòng)態(tài)加載一些內(nèi)容，可以放在條件語(yǔ)句或者函數(shù)執(zhí)行上下文中。
- if(isRequire){
- const result = import('./b')
- }
懶加載
- import() 可以實(shí)現(xiàn)懶加載，舉個(gè)例子 vue 中的路由懶加載;
- [
- {
- path: 'home',
- name: '首頁(yè)',
- component: ()=> import('./home') ,
- },
- ]
React中動(dòng)態(tài)加載
- 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 配合一起用，能夠有動(dòng)態(tài)加載組件的效果。React.lazy 接受一個(gè)函數(shù)，這個(gè)函數(shù)需要?jiǎng)討B(tài)調(diào)用 import() 。
import() 這種加載效果，可以很輕松的實(shí)現(xiàn)代碼分割。避免一次性加載大量 js 文件，造成首次加載白屏?xí)r間過(guò)長(zhǎng)的情況。
tree shaking 實(shí)現(xiàn)
Tree Shaking 在 Webpack 中的實(shí)現(xiàn)，是用來(lái)盡可能的刪除沒(méi)有被使用過(guò)的代碼，一些被 import 了但其實(shí)沒(méi)有被使用的代碼。比如以下場(chǎng)景：
a.js：
- export let num = 1
- export const addNumber = ()=>{
- num++
- }
- export const delNumber = ()=>{
- num--
- }
main.js：
- import { addNumber } from './a'
- addNumber()
如上 a.js 中暴露兩個(gè)方法，addNumber和 delNumber，但是整個(gè)應(yīng)用中，只用到了 addNumber，那么構(gòu)建打包的時(shí)候，delNumber將作為沒(méi)有引用的方法，不被打包進(jìn)來(lái)。
五 Commonjs 和 Es Module 總結(jié)
接下來(lái)貫穿全文，講一下 Commonjs 和 Es Module 的特性。
Commonjs 總結(jié)
Commonjs 的特性如下：
- CommonJS 模塊由 JS 運(yùn)行時(shí)實(shí)現(xiàn)。
- CommonJs 是單個(gè)值導(dǎo)出，本質(zhì)上導(dǎo)出的就是 exports 屬性。
- CommonJS 是可以動(dòng)態(tài)加載的，對(duì)每一個(gè)加載都存在緩存，可以有效的解決循環(huán)引用問(wèn)題。
- CommonJS 模塊同步加載并執(zhí)行模塊文件。
es module 總結(jié)
Es module 的特性如下：
- ES6 Module 靜態(tài)的，不能放在塊級(jí)作用域內(nèi)，代碼發(fā)生在編譯時(shí)。
- ES6 Module 的值是動(dòng)態(tài)綁定的，可以通過(guò)導(dǎo)出方法修改，可以直接訪問(wèn)修改結(jié)果。
- ES6 Module 可以導(dǎo)出多個(gè)屬性和方法，可以單個(gè)導(dǎo)入導(dǎo)出，混合導(dǎo)入導(dǎo)出。
- ES6 模塊提前加載并執(zhí)行模塊文件，
- ES6 Module 導(dǎo)入模塊在嚴(yán)格模式下。
- ES6 Module 的特性可以很容易實(shí)現(xiàn) Tree Shaking 和 Code Splitting。
六 總結(jié)
本文詳細(xì)講解了 Commonjs 和 Es Module ，希望閱讀的同學(xué)能對(duì)前端模塊化的實(shí)現(xiàn)有更深入的認(rèn)識(shí)。吃透本文，能夠輕松應(yīng)付 Commonjs 和 Es Module 的面試知識(shí)點(diǎn)。
