1、Commonjs之 exports和require用法

Commonejs規(guī)定每個文件是一個模塊。將一個JavaScript文件直接通過script標(biāo)簽引入頁面中，和封裝成CommonJS模塊最大的不同在于：前者的頂層作用域是全局作用域，在進(jìn)行變量及函數(shù)聲明時會污染全局環(huán)境；而后者會形成一個屬于模塊自身的作用域，所有的變量及函數(shù)只有自己能訪問，對外是不可見的。

1.1 CommonJS導(dǎo)出之module.exports

導(dǎo)出是一個模塊向外暴露自身的唯一方式。在CommonJS中，通過module.exports可以導(dǎo)出模塊中的內(nèi)容，如：

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

為了書寫方便，CommonJS也支持另一種簡化的導(dǎo)出方式：直接使用exports。效果和上面一樣：

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

注意：導(dǎo)出時不要把module.exports 與 exports混用，下面舉一個錯誤的示例：

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

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

在實(shí)際使用中，為了提高可讀性，應(yīng)該將module.exports及exports語句放在模塊的末尾。

1.2 CommonJS導(dǎo)入之require

在CommonJS中使用require進(jìn)行模塊導(dǎo)入。commonJS_exports.js導(dǎo)出代碼：

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

PageModule.vue頁面中導(dǎo)入代碼：

//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);
}

另外，如果在頁面中對同一模塊進(jìn)行多次導(dǎo)入，則該模塊只會在第一次導(dǎo)入時執(zhí)行，后面的導(dǎo)入不會執(zhí)行，而是直接導(dǎo)出上次執(zhí)行后得到的結(jié)果。示例如下：

var comObj = require('../api/module/commonJS_exports');
                //再調(diào)用一次導(dǎo)入，發(fā)現(xiàn)導(dǎo)入模塊不會再次執(zhí)行，而是直接導(dǎo)出上次執(zhí)行后得到的結(jié)果
require('../api/module/commonJS_exports');

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

我們看到控制臺打印結(jié)果如下，導(dǎo)入模塊果然只執(zhí)行了一次：

....test CommonJS 的導(dǎo)入...

...name:  commonJS_exports.js

8 + 9 =  17

在module對象中有一個屬性loaded用于記錄該模塊是否被加載過，它的默認(rèn)值為false，當(dāng)模塊第一次被加載和執(zhí)行過后會設(shè)置為true，后面再次加載時檢查到module.loaded為true, 則不會再次執(zhí)行模塊代碼。
require函數(shù)可以接收表達(dá)式，借助這個特性我們可以動態(tài)地指定模塊加載路徑

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

2、ES6 Module 之 export 和 import 用法

2015年6月，發(fā)布的ES6才添加了模塊這一特性。ES6 Module也是將每個文件作為一個模塊，每個模塊擁有自身的作用域，不同的是導(dǎo)入、導(dǎo)出語句。import和export也作為保留關(guān)鍵字在ES6版本中加入了進(jìn)來（CommonJS中的module并不屬于關(guān)鍵字）。

2.1 ES6 Module導(dǎo)出之export

在ES6 Module中使用export命令來導(dǎo)出模塊。export有兩種導(dǎo)出形式：

命名導(dǎo)出

默認(rèn)導(dǎo)出

2.1.1 命名導(dǎo)出有兩種不同的寫法：

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

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

第一種寫法是將變量的聲明和導(dǎo)出寫在一行；第二種寫法則是先進(jìn)行變量聲明，然后再用同一個export語句導(dǎo)出。兩種寫法的效果是一樣的。在使用命名導(dǎo)出時，還可以通過as關(guān)鍵字對變量重命名。如：

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

2.1.2 與命名導(dǎo)出不同，模塊的默認(rèn)導(dǎo)出只能有一個。如：

//第二種導(dǎo)出方式：默認(rèn)導(dǎo)出
export default{
    name: 'es6_export',
    add: function(a, b){
        return a + b;
    }
}

我們可以將export default理解為對外輸出了一個名為default的變量，因此不需要像“命名導(dǎo)出”一樣進(jìn)行變量聲明，直接導(dǎo)出即可。

//導(dǎo)出字符串
 export default 'this is es6_export.js file '
 //導(dǎo)出class
 export default class {...}
 //導(dǎo)出匿名函數(shù)
 export default function(){ ... }

2.2 ES6 Module導(dǎo)出之import

ES6 Module中使用import語法導(dǎo)入模塊。

2.2.1 我們看下對于命名導(dǎo)出模塊如何導(dǎo)入

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'; //命名導(dǎo)出第一種導(dǎo)入方式
//    import * as esObj from '../api/module/es6_export.js'; //命名導(dǎo)出第二種別名整體導(dǎo)入方式
import {name, add as getSum } from '../api/module/es6_export.js'; //命名導(dǎo)出第三種別名導(dǎo)入方式

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

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

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

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

另外和命名導(dǎo)出類似，我們可以通過as關(guān)鍵字對到導(dǎo)入的變量重命名。在導(dǎo)入多個變量時，我們還可以采用整體導(dǎo)入的方式，這種import * as <myModule>導(dǎo)入方式可以把所有導(dǎo)入的變量作為屬性添加到<myModule>對象中，從而減少了對當(dāng)前作用域的影響。

2.2.2 我們再看下對默認(rèn)導(dǎo)出的導(dǎo)入

//第二種導(dǎo)出方式：默認(rèn)導(dǎo)出
export default{
    name: 'es6_export.js',
    add: function(a, b){
        return a + b;
    }
}
import esObj from '../api/module/es6_export.js';

//默認(rèn)命名導(dǎo)出的導(dǎo)入測試
console.log('name: ', esObj.name);
console.log('12 + 21: ', esObj.add(12, 21));

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

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

注意：默認(rèn)導(dǎo)出自定義變量名和 命名導(dǎo)出整體起別名有點(diǎn)像，但是命名導(dǎo)出整體起別名必須是在import 后面是* as 別名，而默認(rèn)導(dǎo)出是import后面直接跟自定義變量名。

最后我們看一下兩種導(dǎo)入方式混合起來的例子：

import react, {Component} from 'react'

這里的React對應(yīng)的是該模塊的默認(rèn)導(dǎo)出，而Component則是其命名導(dǎo)出中的一個變量。注意：這里的React必須寫在大括號前面，而不能順序顛倒，否則會引起提示語法錯誤。

2.2.3 復(fù)合寫法。

在工程中，有時需要把某一個模塊導(dǎo)入之后立即導(dǎo)出，比如專門用來集合所有頁面或組件的入口文件。此時可以采用復(fù)合形式的寫法：

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

不過，上面的復(fù)合寫法目前只支持“命名導(dǎo)出”方式暴露出來的變量。默認(rèn)導(dǎo)出則沒有對應(yīng)的復(fù)合形式，只能將導(dǎo)入和導(dǎo)出拆開寫：

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

3、CommonJS和ES6 Module的區(qū)別

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

3.1 動態(tài)和靜態(tài)

CommonJS和ES6 Module最本質(zhì)的區(qū)別在于前者對模塊依賴的解決是“動態(tài)的”，而后者是“靜態(tài)的”。這里“動態(tài)”的含義是, 模塊依賴關(guān)系的建立發(fā)生在代碼運(yùn)行階段；而“靜態(tài)”則是模塊依賴關(guān)系的建立發(fā)生在代碼編譯階段。

我們先看一個CommonJS的例子：

// commonJS_exports.js
module.exports = { name: 'commonJS_exports' }
//PageModule.vue
const name = require('../api/module/commonJS_exports').name;

當(dāng)模塊PageModule.vue加載模塊commonJS_exports.js時,會執(zhí)行commonJS_exports.js中的代碼，并將其module.exports對象作為require函數(shù)的返回值返回。并且require的模塊路徑可以動態(tài)指定，支持傳入一個表達(dá)式，我們甚至可以通過if語句判斷是否加載某個模塊。因此，在CommonJS模塊被執(zhí)行前，并沒有辦法確定明確的依賴關(guān)系，模塊的導(dǎo)入、導(dǎo)出發(fā)生在代碼的運(yùn)行階段。
同樣的例子，我們再對比看下ES6 Module的寫法：

//es6_export.js
export const name = 'es6_export.js';
//PageModule.vue
import { name } from '../api/module/es6_export.js'

ES6 Module的導(dǎo)入、導(dǎo)出語句都是聲明式，它不支持導(dǎo)入的路徑是一個表達(dá)式，并且導(dǎo)入、導(dǎo)出語句必須位于模塊的頂層作用域（比如不能放在if語句中）。

因此我們說，ES6 Module是一種靜態(tài)的模塊結(jié)構(gòu)，在ES6代碼的編譯階段就可以分析出模塊的依賴關(guān)系。它相比于CommonJS來說具備以下幾點(diǎn)優(yōu)勢：

• 冗余代碼檢測和排除。我們可以用靜態(tài)分析工具分析工具檢測出哪些模塊沒有被調(diào)用過。比如，在引入工具類庫時，工程中往往只用到了其中一部分組件或接口，但有可能會將其代碼完整地加載進(jìn)來。未被調(diào)用到的模塊代碼永遠(yuǎn)不會被執(zhí)行，也就成為了冗余代碼。通過靜態(tài)分析可以在打包時去掉這些未曾使用過的模塊，以減少打包資源體積。
• 模塊變量類型檢查。JavaScript屬于動態(tài)類型語言，不會在代碼執(zhí)行前檢查類型錯誤（比如對一個字符串類型的值進(jìn)行函數(shù)調(diào)用）。ES6 Module的靜態(tài)模塊結(jié)構(gòu)有助于確保模塊之間傳遞的值或接口類型是正確的。
• 編譯器優(yōu)化。在CommonJS等動態(tài)模塊系統(tǒng)中，無論采用哪種方式，本質(zhì)上導(dǎo)入的都是一個對象，而ES6 Module支持直接導(dǎo)入變量，減少了引用層級，程序效率更高。

3.2 值拷貝和動態(tài)映射

在導(dǎo)入一個模塊時，對于CommonJS來說獲取的是一份導(dǎo)出值的拷貝；而在ES6 Module中則是值的動態(tài)映射，并且這個映射是只讀的。例子：

//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的一份值拷貝，因此在調(diào)用函數(shù)時，雖然更改了原本calculator.js中count的值，但是并不會對PageModule.vue中導(dǎo)入時創(chuàng)建的副本造成影響。另一方面，在CommonJS中允許對導(dǎo)入的值進(jìn)行更改。我們可以在PageModule.vue更改count和add, 將其賦予新值。同樣，由于是值的拷貝，這些操作不會影響calculator.js本身。

下面我們使用ES6 Module將上面的例子進(jìn)行改寫：

//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 實(shí)時反映es6_export.js中count值的變化
// count += 1; //不可更改，會拋出ReferenceError: count is not defined

上面的例子展示了ES6 Module中導(dǎo)入的變量其實(shí)是對原有值的動態(tài)映射。PageModule.vue中的count是對calculator.js中的count值的實(shí)時反映，當(dāng)我們通過調(diào)用add函數(shù)更改了calculator.js中的count值時，PageModule.vue中count的值也隨之變化。

我們不可以對ES6 Module導(dǎo)入的變量進(jìn)行更改，可以將這種映射關(guān)系理解為一面鏡子，從鏡子里我們可以實(shí)時觀察到原有的事物，但是并不可以操作鏡子中的影像。

3.3 循環(huán)依賴

循環(huán)依賴是指模塊A依賴于B, 同時模塊B依賴于模塊A。一般來說工程中應(yīng)該盡量避免循環(huán)依賴的產(chǎn)生，因?yàn)閺能浖O(shè)計(jì)的角度來說，單向的依賴關(guān)系更加清晰，而循環(huán)依賴則會帶來一定的復(fù)雜度。而在實(shí)際開發(fā)中，循環(huán)依賴有時會在我們不經(jīng)意間產(chǎn)生，因?yàn)楫?dāng)工程的復(fù)雜度上升到足夠規(guī)模時，就容易出現(xiàn)隱藏的循環(huán)依賴關(guān)系。

簡單來說，A和B兩個模塊之間是否存在直接的循環(huán)依賴關(guān)系是很容易被發(fā)現(xiàn)的。但實(shí)際情況往往是A依賴于B，B依賴于C，C依賴于D，最后繞了一圈，D又依賴于A。當(dāng)中間模塊太多時就很難發(fā)現(xiàn)A和B之間存在著隱式的循環(huán)依賴。

因此，如何處理循環(huán)依賴是開發(fā)者必須要面對的問題。

3.3.1 我們首先看下在CommonJS中循環(huán)依賴的問題示例：

//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');
 /*
    打印結(jié)果：
    value of foo:  {}
    value of bar:  This is bar.js
* */

為什么foo的值是一個空對象呢？讓我們從頭梳理一下代碼的實(shí)際執(zhí)行順尋：

1.PageModule.vue引入foo.js, 此時開始執(zhí)行foo.js中的代碼。

2.foo.js的第一句導(dǎo)入了bar.js, 這時foo.js不會繼續(xù)向下執(zhí)行，而是進(jìn)入了bar.js內(nèi)部。

3.在bar.js中又對foo.js進(jìn)行了require，這里產(chǎn)生了循環(huán)依賴。需要注意的是，執(zhí)行權(quán)在這里不會再交回foo.js，而是直接取其導(dǎo)出值，也就是module.exports。但由于foo.js未執(zhí)行完畢，導(dǎo)出值在這時為默認(rèn)的空對象，因此當(dāng)bar.js執(zhí)行到打印語句時，我們看到控制臺中的value of foo就是一個空對象。

4.bar.js執(zhí)行完畢，才將執(zhí)行權(quán)交回foo.js。

5.foo.js從require語句繼續(xù)向下執(zhí)行，在控制臺打印出value of bar(這個值是正確的)，整個流程結(jié)束

由上面可以看出，盡管循環(huán)依賴的模塊均被執(zhí)行了，但模塊導(dǎo)入的值并不是我們想要的。我們再從webpack的實(shí)現(xiàn)角度來看，將上面例子打包后，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: {}
   }
    //...
}

當(dāng)PageModule.vue引用了foo.js之后，相當(dāng)于執(zhí)行了這個__webpack_require__函數(shù)，初始化了一個module對象并放入installedModules中。當(dāng)bar.js再次引用foo.js時，又執(zhí)行了該函數(shù)，但這次是直接從installedModules里面取值，此時它的module.exports是一個空對象。這就解釋了上面再第3步看到的現(xiàn)象。

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';

/* 打印結(jié)果：
    value of foo:  undefined
    value of bar:  This is bar_es6.js
* */

很遺憾，在bar_es6.js中同樣無法得到foo_es6.js正確的導(dǎo)出值，只不過和CommonJS默認(rèn)導(dǎo)出一個空對象不同，這里獲取到的是undefined。上面我們談到，在導(dǎo)入一個模塊時，CommonJS獲取到的時值的拷貝，ES6 Module則是動態(tài)映射

3.3.3 下面我們利用ES6 Module的特性使其支持循環(huán)依賴(正確示例)：

//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');
/* 打印結(jié)果：
    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這一對循環(huán)依賴的模塊均獲取到了正確的導(dǎo)出值。下面我們分析一下代碼的執(zhí)行過程：

1.PageModule.vue作為入口導(dǎo)入了foo_es6_2.js，此時開始執(zhí)行foo_es6_2.js中的代碼。

2.從foo_es6_2.js導(dǎo)入bar_es6_2.js，執(zhí)行權(quán)交給了bar_es6_2.js。

3.在bar_es6_2.js中一直執(zhí)行到其結(jié)束，完成bar函數(shù)的定義。注意，此時由于foo_es6_2.js還沒執(zhí)行完，foo的值現(xiàn)在仍然時undefined。

4.執(zhí)行權(quán)回到foo_es6_2.js繼續(xù) 執(zhí)行直到其結(jié)束，完成foo函數(shù)的定義。由于ES6 Module動態(tài)映射的特性，此時在bar_es6_2.js中的foo的值已經(jīng)從undefined成為了我們定義的函數(shù)，這是于CommonJS在解決循環(huán)依賴時的本質(zhì)區(qū)別，CommonJS中導(dǎo)入的是值得拷貝，不會隨著被夾在模塊中原有值的變化而變化。

5.執(zhí)行權(quán)回到PageModule.vue并調(diào)用foo函數(shù)，此時會依次執(zhí)行foo-->bar-->foo，并在控制臺打印出正確的值。

由上面的例子可以看出，ES6 Module的特性使其可以更好的支持循環(huán)依賴，只是需要由開發(fā)者來保證導(dǎo)入的值被使用時已經(jīng)設(shè)置好正確的導(dǎo)出值。

4、模塊打包原理

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

還是用前面的例子：

//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);

上面的代碼經(jīng)過Webpack打包后將會成為如下的形式（為了易讀性這里只展示代碼的答題結(jié)構(gòu)）：

//立即執(zhí)行匿名函數(shù)
(function(modules){
        //模塊緩存
        var installedModules = {};
        //實(shí)現(xiàn)require
        function __webpack_require__(moduleId){
            //...
        }
        //執(zhí)行入口模塊的加載
        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 內(nèi)容
        },
        jkzz: function(module, exports){
            //commonJS_exports.js 內(nèi)容
        }
})

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

• 最外層立即執(zhí)行匿名函數(shù)。它用來包裹整個bundle，并構(gòu)成自身的作用域。
• installedModules對象。每個模塊只在第一次被加載的時候執(zhí)行，之后其導(dǎo)出值就被存儲到這個對象里面，當(dāng)再次被加載的時候直接從這里取值，而不會重新執(zhí)行。
• __webpack_require__函數(shù)。對模塊加載的實(shí)現(xiàn)，在瀏覽器中可以通過調(diào)用__webpack_require__(moduleId)來完成模塊導(dǎo)入。
• modules對象。工程中所有產(chǎn)生了依賴關(guān)系的模塊都會以key-value的形式放在這里。key可以理解為一個模塊的id， 由數(shù)字或者一個很短的hash字符串構(gòu)成；value則是由一個匿名函數(shù)包裹的模塊實(shí)體，匿名函數(shù)的參數(shù)則賦予了每個模塊導(dǎo)出和導(dǎo)入的能力。

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

1.在最外層的匿名函數(shù)中會初始化瀏覽器執(zhí)行環(huán)境，包括定義installedModules對象、__webpack_require__函數(shù)等，為模塊的加載和執(zhí)行做一些準(zhǔn)備工作。

2.加載入口模塊。每個bundle都有且只有一個入口模塊，在上面的示例中，PageModule.vue是入口模塊，在瀏覽器中會從它開始執(zhí)行。

3.執(zhí)行模塊代碼。如果執(zhí)行到了module.exports則記錄下模塊的導(dǎo)出值；如果中間遇到require函數(shù)(準(zhǔn)確地說是__webpack_require__)，則會暫時交出執(zhí)行權(quán)，進(jìn)入__webpack_require__函數(shù)體內(nèi)進(jìn)行加載其他模塊的邏輯。

4.在__webpack_require__中會判斷即將加載的模塊是否存在于installedModules中。如果存在則直接取值，否則回到第3步，執(zhí)行該模塊的代碼來獲取導(dǎo)出值。

5.所有依賴的模塊都已執(zhí)行完畢，最后執(zhí)行權(quán)又回到入口模塊。當(dāng)入口模塊的代碼執(zhí)行到結(jié)尾，也就意味著整個bundle運(yùn)行結(jié)束。

不難看出，第3步和第4步時一個遞歸的過程，Webpack為每個模塊創(chuàng)造了一個可以導(dǎo)出和導(dǎo)入模塊的環(huán)境，但本質(zhì)上并沒有修改代碼的執(zhí)行邏輯，因此代碼執(zhí)行的順序于模塊加載的順序時完全一致的，這就時Webpack模塊打包的奧秘。

以上就是Js模塊打包exports require import的用法和區(qū)別的詳細(xì)內(nèi)容，更多關(guān)于Js模塊打包的資料請關(guān)注腳本之家其它相關(guān)文章！