ES6モジュールを使用したCreateJS

Question

私は、Babelとwebpackと共にcreateJS - preloadJSとES6を使用しています。私が達成したい何

const files = [{ src: 'characterSprite.png', id: 'characterSprite' }]; 

const Loader = new createjs.LoadQueue(false); 
Loader.loadManifest(files, true, 'img/'); 

export default Loader; 

は、すべての画像をロードするためにpreload.jsであり、他のファイルのように何かをするために（例えばhero.js。）：

import Loader from './loader'; 
Loader.getResult('characterSprite'); 

を私が.getResult()をローダーに呼び出すと、ローダーはプリロードを終了していないので、undefinedを返します。

ローダーが使用して終了したとき、私は確認することができます。私は、ローダーが終了した場合にのみ、モジュールをエクスポートすることができれば

Loader.addEventListener('complete',() => console.log('loader has finished'); 

私の質問はありますか？

これを行うには良い方法がありますか？

Answer 1

私はCreateJSに慣れていないんだけど、あなたはローダをラップすることにより、この問題を解決し、後がそれをインポートすることを始めることができるので、これは、昔ながらのES6（EH）のようになります。

class MyLoader { 
    constructor(files) { 
     this.files = files; 
    } 

    load() { 
     // Using a promise is optional, but I would recommend it 

     return new Promise((resolve) => { 
      const Loader = new createjs.LoadQueue(false); 
      Loader.loadManifest(files, true, 'img/'); 

      Loader.addEventListener('complete',() => { resolve(Loader) }); 
     }); 
    } 
} 

export default MyLoader; 

この方法

import MyLoader from './MyLoader'; 
const files = [{ src: 'characterSprite.png', id: 'characterSprite' }]; 

let myLoaderInstance = new MyLoader(files); 
myLoaderInstance.load().then((completedLoader) => { 
    console.log('Loader has finished!', completedLoader.getResult('characterSprite')); 
}); 

これは意味がありますか？ :)

編集：ウェブパックのfile-loaderを調べると、残りのコードと一緒にバンドルされるように、requireの画像をJSモジュールと同じように表示できます。それは実行時イメージの読み込みとは関係ありませんが、非常に便利です！