Js模塊打包exports require import的用法和區別

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

我們看到控制臺打印結果如下，導入模塊果然隻執行瞭一次：

….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的值是一個空對象呢？讓我們從頭梳理一下代碼的實際執行順尋：

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

2.foo.js的第一句導入瞭bar.js, 這時foo.js不會繼續向下執行，而是進入瞭bar.js內部。

3.在bar.js中又對foo.js進行瞭require，這裡產生瞭循環依賴。需要註意的是，執行權在這裡不會再交回foo.js，而是直接取其導出值，也就是module.exports。但由於foo.js未執行完畢，導出值在這時為默認的空對象，因此當bar.js執行到打印語句時，我們看到控制臺中的value of foo就是一個空對象。

4.bar.js執行完畢，才將執行權交回foo.js。

5.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這一對循環依賴的模塊均獲取到瞭正確的導出值。下面我們分析一下代碼的執行過程：

1.PageModule.vue作為入口導入瞭foo_es6_2.js，此時開始執行foo_es6_2.js中的代碼。

2.從foo_es6_2.js導入bar_es6_2.js，執行權交給瞭bar_es6_2.js。

3.在bar_es6_2.js中一直執行到其結束，完成bar函數的定義。註意，此時由於foo_es6_2.js還沒執行完，foo的值現在仍然時undefined。

4.執行權回到foo_es6_2.js繼續 執行直到其結束，完成foo函數的定義。由於ES6 Module動態映射的特性，此時在bar_es6_2.js中的foo的值已經從undefined成為瞭我們定義的函數，這是於CommonJS在解決循環依賴時的本質區別，CommonJS中導入的是值得拷貝，不會隨著被夾在模塊中原有值的變化而變化。

5.執行權回到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是如何在瀏覽器中執行的：

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

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

3.執行模塊代碼。如果執行到瞭module.exports則記錄下模塊的導出值；如果中間遇到require函數(準確地說是__webpack_require__)，則會暫時交出執行權，進入__webpack_require__函數體內進行加載其他模塊的邏輯。

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

5.所有依賴的模塊都已執行完畢，最後執行權又回到入口模塊。當入口模塊的代碼執行到結尾，也就意味著整個bundle運行結束。

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

以上就是Js模塊打包exports require import的用法和區別的詳細內容，更多關於Js模塊打包的資料請關註WalkonNet其它相關文章！

推薦閱讀：

• webpack模塊化的原理解析
• webpack output.library的16 種取值方法示例
• JS中ESModule和commonjs介紹及使用區別
• JavaScript中require和import的區別詳解
• 淺談Webpack是如何打包CommonJS的