webpackを使用しているときに、2つのファイルがJavascriptで互いに依存している可能性がありますか？

Question

私が入っているフォルダApp持っている：私は私のJSファイルをバンドルするのWebPACKを使用していますので、各JSファイルが必要です

• index.html
• lib私のjavascriptを含むフォルダ（JS）ファイル

をそれは一番上の依存関係（同じlibフォルダ内の他のJSファイル）と一番下のmodule.exportsです。

spaceship.jsはコンストラクタ関数Spaceshipをエクスポートし、bullet.jsはコンストラクタ関数Bulletをエクスポートします。

次に、FactoryというオブジェクトをエクスポートするJSファイルfactory.jsがあります。このオブジェクトはcreateSpaceshipというメソッドが含まれており、createBulletと呼ばれる別：

// Factory.js 
var Bullet = require("./bullet.js"); 
var Spaceship = require("./spaceship.js"); 

var Factory { 
    createSpaceship: function() { 
    (...) 
    return new Spaceship(); 
    }, 
    createBullet: function() { 
    (...) 
    return new Bullet(); 
    } 
} 

module.exports = Factory; 

しかし、spaceship.jsの内側に、弾丸の新しいインスタンスを作成しますfireBulletと呼ばれる方法があります。これを行うために、私はspaceship.jsでfactory.jsを要求したいと思います。 このように2つのファイルを必要とするのは問題ですか？

// spaceship.js 
var Factory = require("./factory.js"); 

var Spaceship = function() { 
    //constructor 
} 

Spaceship.prototype.fireBullet = function() { 
    (...) 
    return Factory.createBullet(); 
} 

私はWebPACKの作品技術的方法がわからない、と私は必要とし、この相互が生成されたものであることを確認することはできません

Uncaught TypeError: Factory.createBullet is not a function

ようspaceship.jsでエラーを取得していますエラー。

Answer 1

WebpackはNodeと同じ方法で循環依存関係を処理するため、それらはサポートされています。https://nodejs.org/api/modules.htmlを参照してください。

循環依存関係は、一般的に再設計することにより回避することができる注目されてきたが、あなたはあなたの現在の設計与えられ、それを修正するには、2つのオプションがありそうであるように：それは思いません

// Spaceship.js 
var Factory = require('./Factory'); 

function Spaceship(name) { 
    // Re-require the factory during instantiation, this works because the factory module has since defined it's export. 
    Factory = require('./Factory'); 
    this.name = name; 
} 

または代わり

// Factory.js 
// Mutate the provided exports object instead of overriding `module.exports`. This works because Node knows what the export will be upfront. NOTE: like the first example the methods will only available in other modules after this module has returned. 
exports.createSpaceship = function(name) { 
    return new Spaceship(name); 
}; 

exports.createBullet = function(name) { 
    return new Bullet(name); 
};