如何捆綁循環依賴模塊？

Question

爲了簡單起見，假設我有兩個模塊：table.js和chart.js。我想用WebPack捆綁它們，但是最終會出現一個錯誤，可能是由於它們彼此依賴。

table.js：

var chart = require('./chart'); 
module.exports = (function() { 
    var init = function() { 
     _loadTable(); 
     chart.init(); 
    }; 

    var update = function() { 
     console.log('table updated'); 
    }; 

    return { 
     init: init, 
     update: update 
    } 
})(); 

chart.js：

var table = require('./table'); 
module.exports = (function() { 
    var init = function() { 
     _drawChart(); 
     table.update(); // will throw an error: table.update is not a function 
    }; 

    return { 
     init: init 
    } 
})(); 

什麼這裏發生了什麼？ 表首先由table.init()加載，然後通過chart.init()加載圖表模塊。圖表被繪製並試圖更新表格作爲回報。

然而，在這一點上chart.js不知道什麼是var table = require('./table')（因爲在那一刻var table = {}），從而table.update()將拋出一個錯誤。

這在模塊管理爲「傳統」（由腳本標記加載並通過全局window對象進行通信）進行管理之前並未發生。

我在想，如果WebPack仍然可以用於像這樣的並行相關模塊？

Answer 1

本文提供了一個非常詳盡的清單，說明您可以如何解決您的問題。

http://www.bitnative.com/2015/02/03/circular-dependencies-in-requirejs/

的內聯形式的需要聲明可能是最快的修復，但有許多缺點。