従来のJavaScriptプロジェクトをモジュール化する方法

Question

webpackを使用して、これまでに ビルドシステムを持たないレガシーJSプロジェクトを構築する必要があります。

プロジェクトは約30個のJSファイルに分割され、すべてが機能を割り当て、 フィールドが単一のグローバルmyAppメガオブジェクトに割り当てられます。 以前は、これらのファイルはすべて1つの名前空間に別々に含まれていました。

myApp.js：

const myApp = { 
    saySomething: function(x) { 
    console.log(x); 
    }, 
    something: "something" 
}; 

someModule.js：

myApp.anotherModule = { 
    foo: function(x) { 
    myApp.someModule.bar(x); 
    } 
}; 

anotherModule.js：

myApp.someModule = { 
    bar: function(x) { 
    myApp.saySomething(x); 
    }, 
    start: function() { 
    myApp.someModule.foo(myApp.something); 
    } 
}; 

エントリポイントがmyApp.someModule.start()を呼ぶだろう、制御フローなんだかこのよう に見えましたメガオブジェクトの異なる部分の間に の織り目ができます。

私はそうのようなindex.jsを因数分解しようとした：

const myApp = require('./myApp'); 
myApp.someModule = require('./someModule'); 
myApp.anotherModule = require('./anotherModule'); 

しかしとき例えば（それぞれのファイルに適切なmodule.exports宣言しています。） anotherModuleのstart関数は、スコープに含まれていないmyApp.someModule.foo()、 を呼び出します。私は、モジュールにrequireでスコープに 自身をそれを持って来ることができない - 私はsomeModuleを含める必要があるだろう、今度は anotherModuleを含める必要があろう、など

がなくても、この混乱から抜け出す方法があります

他の言葉：webpackを使用してメガオブジェクトをアセンブルし、それぞれのスコープを分離することはできますか？

Answer 1

あなたは

require('./someModule')(myApp); 

やモジュールを必要とするパラメータとして

myApp.anotherModule = function(myApp) { 
    return { 
     foo: function(x) { 
     myApp.someModule.bar(x); 
    } 
    } 
}; 

をMyApp]を受け入れて関数をエクスポートする必要がありそう

myApp.someModule = require('./someModule')(myApp); 

は、機能を実行して、myApp参照を渡す必要がありますし、関数myAppにバインドされたオブジェクトを返します