探索模塊打包 exports和require 與 export和import 的用法和區別-有解無憂

選單快捷導航：

CommonJS 之 exports和require用法
ES6 Module 之 export 和 import 用法
CommonJS和ES6 Module的區別
回圈依賴和解決辦法
模塊打包原理簡析

1、CommonJS 之 exports和require用法

　　CommoneJS規定每個檔案是一個模塊，將一個JavaScript檔案直接通過script標簽引入頁面中，和封裝成CommonJS模塊最大的不同在于：前者的頂層作用域是全域作用域，在進行變數及函式宣告時會污染全域環境；而后者會形成一個屬于模塊自身的作用域，所有的變數及函式只有自己能訪問，對外是不可見的，

1.1 CommonJS匯出之module.exports

　　匯出是一個模塊向外暴露自身的唯一方式，在CommonJS中，通過module.exports可以匯出模塊中的內容，如：

module.exports = {
    name: 'commonJS_exports.js',
    add: function(a, b){
        return a + b;
    }
}

　　為了書寫方便，CommonJS也支持另一種簡化的匯出方式：直接使用exports，效果和上面一樣：

exports.name = 'commonJS_exports.js';
exports.add = function(a, b){
    return a + b;
}

　　注意：匯出時不要把module.exports 與 exports混用，下面舉一個錯誤的示例：

exports.add = function(a, b){
    return a + b;
}
module.exports = {
    name: 'commonJS_exports.js'
}

　　上面的代碼先通過exports匯出add屬性，然后將module.exports重新賦值為另外一個物件，這會導致原本擁有的add屬性的物件丟失了，最后匯出的只有name，因此建議一個模塊中的匯出方式要么使用module.exports，要么使用exports，不要混著一起用，

　　在實際使用中，為了提高可讀性，應該將module.exports及exports陳述句放在模塊的末尾，

1.2 CommonJS匯入之require

　　在CommonJS中使用require進行模塊匯入，如：

　　commonJS_exports.js匯出代碼：

console.log('...hello, 我是commonJS_exports.js....start..')
//1、第一種寫法
module.exports = {
    name: 'commonJS_exports.js',
    add: function(a, b){
        return a + b;
    }
}

　　 PageModule.vue頁面中匯入代碼：

//1、測驗CommonJS的exports和require
var comObj = require('../api/module/commonJS_exports');
console.log('...name: ', comObj.name);
try{
      console.log('8 + 9 = ', comObj.add(8, 9));
}catch(e){
      console.log(e);
}

　　另外，如果在頁面中對同一模塊進行多次匯入，則該模塊只會在第一次匯入時執行，后面的匯入不會執行，而是直接匯出上次執行后得到的結果，示例如下：

var comObj = require('../api/module/commonJS_exports');
                //再呼叫一次匯入，發現匯入模塊不會再次執行，而是直接匯出上次執行后得到的結果
require('../api/module/commonJS_exports');

console.log('...name: ', comObj.name);
try{
      console.log('8 + 9 = ', comObj.add(8, 9));
}catch(e){
      console.log(e);
}

View Code

　　我們看到控制臺列印結果如下，匯入模塊果然只執行了一次：

....test CommonJS 的匯入...
...name:  commonJS_exports.js
8 + 9 =  17

　　在module物件中有一個屬性loaded用于記錄該模塊是否被加載過，它的默認值為false，當模塊第一次被加載和執行過后會設定為true，后面再次加載時檢查到module.loaded為true, 則不會再次執行模塊代碼，
　　require函式可以接收運算式，借助這個特性我們可以動態地指定模塊加載路徑

const moduleNames = ['foo.js', 'bar.js'];
moduleNames.forEach(name=>{
   require('./' + name);
})

2、ES6 Module 之 export 和 import 用法

　　2015年6月，發布的ES6才添加了模塊這一特性，ES6 Module也是將每個檔案作為一個模塊，每個模塊擁有自身的作用域，不同的是匯入、匯出陳述句，import和export也作為保留關鍵字在ES6版本中加入了進來（CommonJS中的module并不屬于關鍵字），

2.1 ES6 Module匯出之export

　　在ES6 Module中使用export命令來匯出模塊，export有兩種匯出形式：

命名匯出
默認匯出

2.1.1 命名匯出有兩種不同的寫法：

//第一種匯出方式：命名匯出
//1.1 命名匯出第一種寫法
export const name = 'es6_export.js';
export const add = function(a, b) { return a + b; }

// //1.2 命名匯出第二種寫法
// const name = 'es6_export.js'
// const add = function(a, b){ return a + b; }
// export { name, add };

　　第一種寫法是將變數的宣告和匯出寫在一行；第二種寫法則是先進行變數宣告，然后再用同一個export陳述句匯出，兩種寫法的效果是一樣的，在使用命名匯出時，還可以通過as關鍵字對變數重命名，如：

const name = 'es6_export.js'
const add = function(a, b){ return a + b; }
export { name, add as getSum }; //在匯入時即為name和getSum

2.1.2 與命名匯出不同，模塊的默認匯出只能有一個，如：

//第二種匯出方式：默認匯出
export default{
    name: 'es6_export',
    add: function(a, b){
        return a + b;
    }
}

　　我們可以將export default理解為對外輸出了一個名為default的變數，因此不需要像“命名匯出”一樣進行變數宣告，直接匯出即可，

//匯出字串
 export default 'this is es6_export.js file '
 //匯出class
 export default class {...}
 //匯出匿名函式
 export default function(){ ... }

2.2 ES6 Module匯出之import

　　ES6 Module中使用import語法匯入模塊，

2.2.1 我們看下對于命名匯出模塊如何匯入

const name = 'es6_export.js'
const add = function(a, b){ return a + b; }
export { name, add };

//    import {name, add } from '../api/module/es6_export.js'; //命名匯出第一種匯入方式
//    import * as esObj from '../api/module/es6_export.js'; //命名匯出第二種別名整體匯入方式
import {name, add as getSum } from '../api/module/es6_export.js'; //命名匯出第三種別名匯入方式

//                //命名匯出第一種匯入方式
//                console.log('name: ', name);
//                console.log('12 + 21: ', add(12, 21));

//                //命名匯出第二種別名匯入方式
//                console.log('name: ', esObj.name);
//                console.log('12 + 21: ', esObj.add(12, 21));

                //命名匯出第三種別名匯入方式
                console.log('name: ', name);
                console.log('12 + 21: ', getSum(12, 21));

　　加載帶有命名匯出的模塊時，import后面要跟一對大括號來將匯入的變數名包裹起來，并且這些變數需要與匯出的變數名完全一致，匯入變數的效果相當于在當前作用域下宣告了這些變數(name和add)，并且不可對其進行更改，也就是所有匯入的變數都是只讀的，

　　另外和命名匯出類似，我們可以通過as關鍵字對到匯入的變數重命名，在匯入多個變數時，我們還可以采用整體匯入的方式，這種import * as <myModule>匯入方式可以把所有匯入的變數作為屬性添加到<myModule>物件中，從而減少了對當前作用域的影響，

2.2.2 我們再看下對默認匯出的匯入

//第二種匯出方式：默認匯出
export default{
    name: 'es6_export.js',
    add: function(a, b){
        return a + b;
    }
}

import esObj from '../api/module/es6_export.js';

//默認命名匯出的匯入測驗
console.log('name: ', esObj.name);
console.log('12 + 21: ', esObj.add(12, 21));

　　對于默認匯出來說，import后面直接跟變數名，并且這個名字可以自由指定(比如這里時esObj)，它指代了es6_export.js中默認匯出的值，從原理上可以這樣去理解：

import { default as esObj } from '../api/module/es6_export';

注意：默認匯出自定義變數名和命名匯出整體起別名有點像，但是命名匯出整體起別名必須是在import 后面是 * as 別名，而默認匯出是import后面直接跟自定義變數名，

最后我們看一下兩種匯入方式混合起來的例子：

import React, {Component} from 'react'

　　這里的React對應的是該模塊的默認匯出，而Component則是其命名匯出中的一個變數，注意：這里的React必須寫在大括號前面，而不能順序顛倒，否則會引起提示語法錯誤，

2.2.3 復合寫法，

　　在工程中，有時需要把某一個模塊匯入之后立即匯出，比如專門用來集合所有頁面或組件的入口檔案，此時可以采用復合形式的寫法：

export {name, add} from '../api/module/es6_export.js'

　　不過，上面的復合寫法目前只支持“命名匯出”方式暴露出來的變數，

　　默認匯出則沒有對應的復合形式，只能將匯入和匯出拆開寫：

import esObj from  '../api/module/es6_export.js'
export default esObj

3、CommonJS和ES6 Module的區別

　　上面我們分別介紹CommonJS和ES6 Module兩種形式的模塊定義，在實際開發中我們經常會將二者混用，下面對比一下它們的特性：

3.1 動態和靜態

　　CommonJS和ES6 Module最本質的區別在于前者對模塊依賴的解決是“動態的”，而后者是“靜態的”，這里“動態”的含義是, 模塊依賴關系的建立發生在代碼運行階段；而“靜態”則是模塊依賴關系的建立發生在代碼編譯階段，

　　我們先看一個CommonJS的例子：

// commonJS_exports.js
module.exports = { name: 'commonJS_exports' }

//PageModule.vue
const name = require('../api/module/commonJS_exports').name;

　　當模塊PageModule.vue加載模塊commonJS_exports.js時,會執行commonJS_exports.js中的代碼，并將其module.exports物件作為require函式的回傳值回傳，并且require的模塊路徑可以動態指定，支持傳入一個運算式，我們甚至可以通過if陳述句判斷是否加載某個模塊，因此，在CommonJS模塊被執行前，并沒有辦法確定明確的依賴關系，模塊的匯入、匯出發生在代碼的運行階段，
　　同樣的例子，我們再對比看下ES6 Module的寫法：

//es6_export.js
export const name = 'es6_export.js';

//PageModule.vue
import { name } from '../api/module/es6_export.js'

　　ES6 Module的匯入、匯出陳述句都是宣告式，它不支持匯入的路徑是一個運算式，并且匯入、匯出陳述句必須位于模塊的頂層作用域（比如不能放在if陳述句中），

因此我們說，ES6 Module是一種靜態的模塊結構，在ES6代碼的編譯階段就可以分析出模塊的依賴關系，它相比于CommonJS來說具備以下幾點優勢：

冗余代碼檢測和排除，我們可以用靜態分析工具分析工具檢測出哪些模塊沒有被呼叫過，比如，在引入工具類別庫時，工程中往往只用到了其中一部分組件或介面，但有可能會將其代碼完整地加載進來，未被呼叫到的模塊代碼永遠不會被執行，也就成為了冗余代碼，通過靜態分析可以在打包時去掉這些未曾使用過的模塊，以減少打包資源體積，
模塊變數型別檢查，JavaScript屬于動態型別語言，不會在代碼執行前檢查型別錯誤（比如對一個字串型別的值進行函式呼叫），ES6 Module的靜態模塊結構有助于確保模塊之間傳遞的值或介面型別是正確的，
編譯器優化，在CommonJS等動態模塊系統中，無論采用哪種方式，本質上匯入的都是一個物件，而ES6 Module支持直接匯入變數，減少了參考層級，程式效率更高，

3.2 值拷貝和動態映射

　　在匯入一個模塊時，對于CommonJS來說獲取的是一份匯出值的拷貝；而在ES6 Module中則是值的動態映射，并且這個映射是只讀的，例子：

//commonJS_exports.js
var count = 0;
module.exports = {
    count: count,
    add: function(a, b){
         count+=1;
         return a + b;
    }
}

 //PageModule.vue
 var count = require('../api/module/commonJS_exports.js').count;
 var add = require('../api/module/commonJS_exports.js').add;
 console.log(count); //0 這里的count是對commonJS_exports.js中count值的拷貝
 add(2, 3);
 console.log(count); //0 commonJS_exports.js中變數值的改變不會對這里的拷貝值造成影響
 count += 1;
 console.log(count); //1 拷貝的值可以更改

　　PageModule.vue中的count是對commonJS_exports.js中count的一份值拷貝，因此在呼叫函式時，雖然更改了原本calculator.js中count的值，但是并不會對PageModule.vue中匯入時創建的副本造成影響，另一方面，在CommonJS中允許對匯入的值進行更改，我們可以在PageModule.vue更改count和add, 將其賦予新值，同樣，由于是值的拷貝，這些操作不會影響calculator.js本身，

　　下面我們使用ES6 Module將上面的例子進行改寫：

//es6_export.js
let count = 0;
const add = function(a, b){
    count += 1;
    return a + b;
}
export { count, add }

import {name, add, count } from '../api/module/es6_export';

console.log(count); //0, 對es6_export.js中的count值的映射
add(2, 3);
console.log(count); //1 實時反映es6_export.js中count值的變化
// count += 1; //不可更改，會拋出ReferenceError: count is not defined

　　上面的例子展示了ES6 Module中匯入的變數其實是對原有值的動態映射，PageModule.vue中的count是對calculator.js中的count值的實時反映，當我們通過呼叫add函式更改了calculator.js中的count值時，PageModule.vue中count的值也隨之變化，

我們不可以對ES6 Module匯入的變數進行更改，可以將這種映射關系理解為一面鏡子，從鏡子里我們可以實時觀察到原有的事物，但是并不可以操作鏡子中的影像，

3.3 回圈依賴

　　回圈依賴是指模塊A依賴于B, 同時模塊B依賴于模塊A，一般來說工程中應該盡量避免回圈依賴的產生，因為從軟體設計的角度來說，單向的依賴關系更加清晰，而回圈依賴則會帶來一定的復雜度，而在實際開發中，回圈依賴有時會在我們不經意間產生，因為當工程的復雜度上升到足夠規模時，就容易出現隱藏的回圈依賴關系，

　　簡單來說，A和B兩個模塊之間是否存在直接的回圈依賴關系是很容易被發現的，但實際情況往往是A依賴于B，B依賴于C，C依賴于D，最后繞了一圈，D又依賴于A，當中間模塊太多時就很難發現A和B之間存在著隱式的回圈依賴，

　　因此，如何處理回圈依賴是開發者必須要面對的問題，

3.3.1 我們首先看下在CommonJS中回圈依賴的問題示例：

//bar.js
const foo = require('./foo.js');
console.log('value of foo: ', foo);
module.exports = 'This is bar.js';

//foo.js
const bar = require('./bar.js');
console.log('value of bar: ', bar);
module.exports = 'This is foo.js';

//PageModule.vue

require('../api/module/foo.js');
 /*
    列印結果：
    value of foo:  {}
    value of bar:  This is bar.js
* */

　　為什么foo的值是一個空物件呢？讓我們從頭梳理一下代碼的實際執行順尋：

PageModule.vue引入foo.js, 此時開始執行foo.js中的代碼，
foo.js的第一句匯入了bar.js, 這時foo.js不會繼續向下執行，而是進入了bar.js內部，
在bar.js中又對foo.js進行了require，這里產生了回圈依賴，需要注意的是，執行權在這里不會再交回foo.js，而是直接取其匯出值，也就是module.exports，但由于foo.js未執行完畢，匯出值在這時為默認的空物件，因此當bar.js執行到列印陳述句時，我們看到控制臺中的value of foo就是一個空物件，
bar.js執行完畢，才將執行權交回foo.js，
foo.js從require陳述句繼續向下執行，在控制臺列印出value of bar(這個值是正確的)，整個流程結束

　　由上面可以看出，盡管回圈依賴的模塊均被執行了，但模塊匯入的值并不是我們想要的，我們再從Webpack的實作角度來看，將上面例子打包后，bundle中有這樣一段代碼非常重要：

//The require function
function __webpack_require__(moduleId){
   if(installedModules[moduleId]){
        return installedModules[moduleId].exports;
   }
   //Create a new module (and put it into the cache)
   var module = installedModules[moduleId] = {
        i: moduleId,
        l: false,
        exports: {}
   }
    //...
}

　　當PageModule.vue參考了foo.js之后，相當于執行了這個__webpack_require__函式，初始化了一個module物件并放入installedModules中，當bar.js再次參考foo.js時，又執行了該函式，但這次是直接從installedModules里面取值，此時它的module.exports是一個空物件，這就解釋了上面再第3步看到的現象，

3.3.2 接下來我們使用ES6 Module的方式重寫上面的問題示例：

//bar_es6.js
import foo from './foo_es6.js';
console.log('value of foo: ', foo);
export default 'This is bar_es6.js';

//foo_es6.js
import bar from './bar_es6.js';
console.log('value of bar: ', bar);
export default 'This is foo_es6.js';

//PageModule.vue
import foo_es6 from '../api/module/foo_es6.js';

/* 列印結果：
    value of foo:  undefined
    value of bar:  This is bar_es6.js
* */

　　很遺憾，在bar_es6.js中同樣無法得到foo_es6.js正確的匯出值，只不過和CommonJS默認匯出一個空物件不同，這里獲取到的是undefined，

　　上面我們談到，在匯入一個模塊時，CommonJS獲取到的時值的拷貝，ES6 Module則是動態映射，

3.3.3 下面我們利用ES6 Module的特性使其支持回圈依賴(正確示例) ：

//bar_es6_2.js
import foo from './foo_es6_2.js';
let invoked = false;
function bar(invoker){
    if (!invoked){
        invoked = true;
        console.log(invoker + ' invokes bar_es6_2.js');
        foo('bar_es6_2.js');
    }
}
export default bar;

//foo_es6_2.js
import bar from './bar_es6_2.js'
function foo(invoker){
    console.log(invoker + ' invokes foo_es6_2.js');
    bar('foo_es6_2.js');
}
export default foo;

import foo_es6_2 from '../api/module/foo_es6_2.js'

foo_es6_2('PageModule.vue');
/* 列印結果：
    PageModule.vue invokes foo_es6_2.js
    foo_es6_2.js invokes bar_es6_2.js
    bar_es6_2.js invokes foo_es6_2.js
* */

　　可以看到，foo_es6_2.js和bar_es6_2.js這一對回圈依賴的模塊均獲取到了正確的匯出值，下面我們分析一下代碼的執行程序：

PageModule.vue作為入口匯入了foo_es6_2.js，此時開始執行foo_es6_2.js中的代碼，
從foo_es6_2.js匯入bar_es6_2.js，執行權交給了bar_es6_2.js，
在bar_es6_2.js中一直執行到其結束，完成bar函式的定義，注意，此時由于foo_es6_2.js還沒執行完，foo的值現在仍然時undefined，
執行權回到foo_es6_2.js繼續執行直到其結束，完成foo函式的定義，由于ES6 Module動態映射的特性，此時在bar_es6_2.js中的foo的值已經從undefined成為了我們定義的函式，這是于CommonJS在解決回圈依賴時的本質區別，CommonJS中匯入的是值得拷貝，不會隨著被夾在模塊中原有值的變化而變化，
執行權回到PageModule.vue并呼叫foo函式，此時會依次執行foo-->bar-->foo，并在控制臺列印出正確的值，

　　由上面的例子可以看出，ES6 Module的特性使其可以更好的支持回圈依賴，只是需要由開發者來保證匯入的值被使用時已經設定好正確的匯出值，

4、模塊打包原理

　　面對工程中成百上千個模塊，webpack究竟時如何將它們有序的組織在一起，并按照我們預想的順序運行在瀏覽器上的呢？下面我們將從原理上進行探究，

　　還是用前面的例子：

//commonJS_exports.js
module.exports = {
    add: function(a, b){
        return a + b;
    }
}

//PageModule.vue
const comObj = require('../api/module/commonJS_exports');
const sum = comObj.add(2, 3);
console.log('sum: ', sum);

　　上面的代碼經過Webpack打包后將會成為如下的形式（為了易讀性這里只展示代碼的答題結構）：

//立即執行匿名函式
(function(modules){
        //模塊快取
        var installedModules = {};
        //實作require
        function __webpack_require__(moduleId){
            //...
        }
        //執行入口模塊的加載
        return __webpack_require__(__webpack__require__.s == 0);
 })({
        //modules: 以key-value的形式存盤所有被打包的模塊
        0: function(module, exports, __webpack_require__){
            //打包入口
            module.exports = __webpack_require__("3qiv");
        },
        "3qiv": function(module, exports, __webpack_require__){
            //PageModule.vue 內容
        },
        jkzz: function(module, exports){
            //commonJS_exports.js 內容
        }
})

　　這是一個最簡單的Webpack打包結果(bundle)，但已經可以清晰地展示出它是如何將具有依賴關系的模塊串聯在一起的，上面的bundle分為以下幾個部分：

最外層立即執行匿名函式，它用來包裹整個bundle，并構成自身的作用域，
installedModules物件，每個模塊只在第一次被加載的時候執行，之后其匯出值就被存盤到這個物件里面，當再次被加載的時候直接從這里取值，而不會重新執行，
__webpack_require__函式，對模塊加載的實作，在瀏覽器中可以通過呼叫__webpack_require__(moduleId)來完成模塊匯入，
modules物件，工程中所有產生了依賴關系的模塊都會以key-value的形式放在這里，key可以理解為一個模塊的id，由數字或者一個很短的hash字串構成；value則是由一個匿名函式包裹的模塊物體，匿名函式的引數則賦予了每個模塊匯出和匯入的能力，

　　接下來我們看看一個bundle是如何在瀏覽器中執行的：

在最外層的匿名函式中會初始化瀏覽器執行環境，包括定義installedModules物件、__webpack_require__函式等，為模塊的加載和執行做一些準備作業，
加載入口模塊，每個bundle都有且只有一個入口模塊，在上面的示例中，PageModule.vue是入口模塊，在瀏覽器中會從它開始執行，
執行模塊代碼，如果執行到了module.exports則記錄下模塊的匯出值；如果中間遇到require函式(準確地說是__webpack_require__)，則會暫時交出執行權，進入__webpack_require__函式體內進行加載其他模塊的邏輯，
在__webpack_require__中會判斷即將加載的模塊是否存在于installedModules中，如果存在則直接取值，否則回到第3步，執行該模塊的代碼來獲取匯出值，
所有依賴的模塊都已執行完畢，最后執行權又回到入口模塊，當入口模塊的代碼執行到結尾，也就意味著整個bundle運行結束，

　　不難看出，第3步和第4步時一個遞回的程序，Webpack為每個模塊創造了一個可以匯出和匯入模塊的環境，但本質上并沒有修改代碼的執行邏輯，因此代碼執行的順序于模塊加載的順序時完全一致的，這就時Webpack模塊打包的奧秘，

本文測驗截圖：

下載測驗DEMO：https://github.com/xiaotanit/tan_vue，如果你覺得可以，請順手點個星^_^，

npm install , npm run serve 后，在瀏覽器輸入測驗地址看效果：

http://localhost:8080/pageModule   //埠可能會變化

參考書籍：《Webpack實戰：入門、進階與調優》--- 居玉皓

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/158309.html

標籤：JavaScript

上一篇：JS高級---新內容課程介紹

下一篇：自制正則運算式測驗工具

探索 模塊打包 exports和require 與 export和import 的用法和區別