1、Commonjs之 exports和require用法

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

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

導(dǎo)出是一個(gè)模塊向外暴露自身的唯一方式。在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)出時(shí)不要把module.exports 與 exports混用，下面舉一個(gè)錯(cuò)誤的示例：

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

上面的代碼先通過exports導(dǎo)出add屬性，然后將module.exports重新賦值為另外一個(gè)對象。這會導(dǎo)致原本擁有的add屬性的對象丟失了，最后導(dǎo)出的只有name。因此建議一個(gè)模塊中的導(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和requirevar 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)入時(shí)執(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對象中有一個(gè)屬性loaded用于記錄該模塊是否被加載過，它的默認(rèn)值為false，當(dāng)模塊第一次被加載和執(zhí)行過后會設(shè)置為true，后面再次加載時(shí)檢查到module.loaded為true, 則不會再次執(zhí)行模塊代碼。require函數(shù)可以接收表達(dá)式，借助這個(gè)特性我們可以動態(tài)地指定模塊加載路徑

const moduleNames = [’foo.js’, ’bar.js’];moduleNames.forEach(name=>{ require(’./’ + name);})2、ES6 Module 之 export 和 import 用法

2015年6月，發(fā)布的ES6才添加了模塊這一特性。ES6 Module也是將每個(gè)文件作為一個(gè)模塊，每個(gè)模塊擁有自身的作用域，不同的是導(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)行變量聲明，然后再用同一個(gè)export語句導(dǎo)出。兩種寫法的效果是一樣的。在使用命名導(dǎo)出時(shí)，還可以通過as關(guān)鍵字對變量重命名。如：

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

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

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

我們可以將export default理解為對外輸出了一個(gè)名為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)出的模塊時(shí)，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)入多個(gè)變量時(shí)，我們還可以采用整體導(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后面直接跟變量名，并且這個(gè)名字可以自由指定(比如這里時(shí)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)出中的一個(gè)變量。注意：這里的React必須寫在大括號前面，而不能順序顛倒，否則會引起提示語法錯(cuò)誤。

2.2.3 復(fù)合寫法。

在工程中，有時(shí)需要把某一個(gè)模塊導(dǎo)入之后立即導(dǎo)出，比如專門用來集合所有頁面或組件的入口文件。此時(shí)可以采用復(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 esObj3、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ā)生在代碼編譯階段。

我們先看一個(gè)CommonJS的例子：

// commonJS_exports.jsmodule.exports = { name: ’commonJS_exports’ }//PageModule.vueconst name = require(’../api/module/commonJS_exports’).name;

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

//es6_export.jsexport const name = ’es6_export.js’;//PageModule.vueimport { name } from ’../api/module/es6_export.js’

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

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

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

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

//es6_export.jslet 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í)時(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í)時(shí)反映，當(dāng)我們通過調(diào)用add函數(shù)更改了calculator.js中的count值時(shí)，PageModule.vue中count的值也隨之變化。

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

3.3 循環(huán)依賴

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

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

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

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

//bar.jsconst foo = require(’./foo.js’);console.log(’value of foo: ’, foo);module.exports = ’This is bar.js’;//foo.jsconst bar = require(’./bar.js’);console.log(’value of bar: ’, bar);module.exports = ’This is foo.js’;//PageModule.vuerequire(’../api/module/foo.js’); /* 打印結(jié)果： value of foo: {} value of bar: This is bar.js* */

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

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

2.foo.js的第一句導(dǎo)入了bar.js, 這時(shí)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)出值在這時(shí)為默認(rèn)的空對象，因此當(dāng)bar.js執(zhí)行到打印語句時(shí)，我們看到控制臺中的value of foo就是一個(gè)空對象。

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

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

由上面可以看出，盡管循環(huán)依賴的模塊均被執(zhí)行了，但模塊導(dǎo)入的值并不是我們想要的。我們再從webpack的實(shí)現(xiàn)角度來看，將上面例子打包后，bundle中有這樣一段代碼非常重要：

//The require functionfunction __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í)行了這個(gè)__webpack_require__函數(shù)，初始化了一個(gè)module對象并放入installedModules中。當(dāng)bar.js再次引用foo.js時(shí)，又執(zhí)行了該函數(shù)，但這次是直接從installedModules里面取值，此時(shí)它的module.exports是一個(gè)空對象。這就解釋了上面再第3步看到的現(xiàn)象。

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

//bar_es6.jsimport foo from ’./foo_es6.js’;console.log(’value of foo: ’, foo);export default ’This is bar_es6.js’;//foo_es6.jsimport bar from ’./bar_es6.js’;console.log(’value of bar: ’, bar);export default ’This is foo_es6.js’;//PageModule.vueimport 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)出一個(gè)空對象不同，這里獲取到的是undefined。上面我們談到，在導(dǎo)入一個(gè)模塊時(shí)，CommonJS獲取到的時(shí)值的拷貝，ES6 Module則是動態(tài)映射

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

//bar_es6_2.jsimport 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.jsimport 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，此時(shí)開始執(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ù)的定義。注意，此時(shí)由于foo_es6_2.js還沒執(zhí)行完，foo的值現(xiàn)在仍然時(shí)undefined。

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

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

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

4、模塊打包原理

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

還是用前面的例子：

//commonJS_exports.jsmodule.exports = { add: function(a, b){return a + b; }}//PageModule.vueconst 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)requirefunction __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)容}})

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

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

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

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

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

3.執(zhí)行模塊代碼。如果執(zhí)行到了module.exports則記錄下模塊的導(dǎo)出值；如果中間遇到require函數(shù)(準(zhǔn)確地說是__webpack_require__)，則會暫時(shí)交出執(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é)尾，也就意味著整個(gè)bundle運(yùn)行結(jié)束。

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

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