importazioni circolari con webpack ritorno oggetto vuoto

Question

Premendo questo problema esatto momento:

FileA: 
var b = require file B 
var c = require file C 

FileB: 
var a = require file A 

FileC: 
var a = require file A 

Quando si esegue il codice, ottengo un errore di file C:

A.doSomething is not a function 

gettato un debugger in là e ho visto che A è un oggetto vuoto. Che cosa è davvero strano è che sto ricevendo solo un errore nel file C, ma non il file B. Super confuso qui.

Answer 1

Questo non è un problema di webpack ma una proprietà di moduli CommonJS.

Quando un modulo CommonJS viene richiesto per la prima volta, la proprietà exports viene inizializzata su un oggetto vuoto dietro le quinte.

module.exports = {}; 

Il modulo può quindi decidere di estendere questa proprietà exports, o ignorarla.

exports.namedExport = function() { /* ... */ }; // extends 

module.exports = { namedExport: function() { /* ... */ } }; // overrides 

Così, quando A richiede B e B richiede A subito dopo, A non è ancora eseguita (che produrrebbe un loop infinito), ma la sua attuale exports proprietà viene restituito. Dal A richiesto B nella parte superiore del file, prima di esportare qualsiasi cosa, la chiamata require('A') nel modulo B genererà un oggetto vuoto.

Una correzione comune per le dipendenze circolari consiste nel mettere le importazioni alla fine del file, dopo il che hai esportato le variabili richieste da altri moduli.

A:

module.exports = { foo: 'bar' }; 
require('B'); // at this point A.exports is not empty anymore 

B:

var A = require('A'); 
A.foo === 'bar';