DOMロードを待つモジュールからのWebpack依存関係

Question

いくつかのイベントを待っている間にモジュールからの依存関係を解決する方法はありますか？

たとえば、データ属性からアプリケーションユーザーIDを取得し、User（User.jsから）オブジェクトを作成し、アプリケーションに広く使用されるようにウィンドウに格納するモジュールglobals.jsがあります。

globals.js：

define('globals', ['User'], function (User) { 
    document.addEventListener('DOMContentLoaded', function() { 
     var id = document.body.getAttribute('data-user-id') 
     window.appUser = new User(id); 
    }); 
}); 

user.jsの（私はそれが依存関係を持っているのでglobals.jsのコードは、Web詰めにしたいことを示すために）：

define('User', function() { 
    return class User { 
     constructor(id) { 
      this.id = parseInt(id); 
     } 
    } 
}); 

そしてapp.js globals.jsが必要です。

require(['globals'], function() { 
    //window.appUser will throw ReferenceError: appUser is not defined 
    //Add DOMContentLoaded listener here again? :(
}); 

globals.jsに依存する各モジュールでDOMContentLoadedイベントリスナーを宣言しないようにしてください。 これをどのように管理できますか？

Answer 1

あなたは実際にWebpackでその「問題」を解決することはできません。ここに本当の問題があるのはあなたのアーキテクチャです。 グローバルモジュールが転送されて評価された時点で、Webpackはコールバックメソッドを正しく呼び出しますが、その時点でモジュールが実際に非同期イベント（DOMContentLoaded）を待機していることはわかりません。

私に尋ねると、これはPromiseオブジェクトの主要な例です。グローバルモジュールでプロミスを作成し、そのプロミスをすぐに返します。その後、グローバル（）を含む任意のモジュールで返されたPromiseを取得して、.then()ハンドラに必要なものだけを置くことができます。その後、

define('globals', ['User'], function (User) { 
    return new Promise(function(res, rej) { 
     document.addEventListener('DOMContentLoaded', function() { 
      var id = document.body.getAttribute('data-user-id') 
      //window.appUser = new User(id); 
      res(new User(id)); 
     }); 
    }); 
}); 

...と

require(['globals'], function (getUser) { 
    getUser.then(function(user) { 
     // do whatever with user object 
    }); 
}); 

のように行く私は実際にはCommonJSおよび/またはES7モジュールを使用して、AMDモジュールの構文とあまり慣れていないんだけど、これはトリックを行う必要があります。いろいろな理由でグローバルオブジェクトをデータでぶつけるのは一般的には悪い選択です。そこで、ここで2つの問題を一度に取り除くことができます。

注意：ここでは、アーキテクチャにさまざまな欠陥があります。 グローバルモジュールが含まれているため、DOMContentLoadedが起動していないと仮定しています。グローバル内でdocument.readyStateを確認し、Promiseを直接解決するか、必要に応じてDCLイベントを待ち受けることをおすすめします。