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

阿新 • • 發佈：2020-01-04

選單快捷導航：

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實戰：入門、進階與調優》--- 居

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

1、CommonJS 之 exports和require用法

1.1 CommonJS匯出之module.exports

1.2 CommonJS匯入之require

2、ES6 Module 之 export 和 import 用法

2.1 ES6 Module匯出之export

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

2.1.2 與命名匯出不同，模組的預設匯出只能有一個。如：

2.2 ES6 Module匯出之import

2.2.1 我們看下對於命名匯出模組如何匯入

2.2.2 我們再看下對預設匯出的匯入

2.2.3 複合寫法。

3、CommonJS和ES6 Module的區別

3.1 動態和靜態

3.2 值拷貝和動態對映

3.3 迴圈依賴

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

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

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

4、模組打包原理

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

總結oninput、onchange與onpropertychange事件的用法和區別

關於import, @, *, export, export default的用法和區別

ES6中export與export default的用法

C# 委託delegate與事件Event的用法和相關知識

oninput、onchange與onpropertychange事件的用法和區別

Java IO操作——物件序列化（Serializable介面、ObjectOutputStream、以及與Externalizable介面的用法和區別）

Java中Date類與Calendar類的用法和轉化

笨方法學python之import sys與from sys import argv的區別

window.location.href和window.open的幾種用法和區別

location.href和window.open的幾種用法和區別

模組匯出簡介：module.exports與export

[js高手之路]深入淺出webpack系列1-安裝與基本打包用法和命令參數

檔案與檔案系統的壓縮和打包

5.Linux檔案與檔案系統的壓縮和打包

nodejs（四）require與exports

exports與module.exports的區別,export與export.defult區別

nodeJs--模組module.exports與例項化方法

js學習記錄之（一）require 與module.exports

Dll 模組間(dll, exe)使用匯出變數、靜態變數和外部變數的試驗與結論

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

1、CommonJS 之 exports和require用法

1.1 CommonJS匯出之module.exports

1.2 CommonJS匯入之require

2、ES6 Module 之 export 和 import 用法

2.1 ES6 Module匯出之export

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

2.1.2 與命名匯出不同，模組的預設匯出只能有一個。如：

2.2 ES6 Module匯出之import

2.2.1 我們看下對於命名匯出模組如何匯入

2.2.2 我們再看下對預設匯出的匯入

2.2.3 複合寫法。

3、CommonJS和ES6 Module的區別

3.1 動態和靜態

3.2 值拷貝和動態對映

3.3 迴圈依賴

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

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

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

4、模組打包原理

相關推薦

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