使用RequireJS加载PreloadJS

Question

I am new in using RequireJS in loading modules especially loading libraries like CreateJS. I wanted to use PreloadJS with SoundJS. I have properly loaded SoundJS via RequireJS and I am not having problem so far. What I am having problem with is the PreloadJS. I load it using this way:

require.config(
  {
    paths :
    {
        soundjs   : 'core/soundjs-0.6.1.min'
      , preloadjs : 'core/preloadjs-0.6.1.min'
    }

    ,shim :
    {
        'preloadjs' : { exports : "createjs" }
      , 'soundjs'   : { exports : "createjs.Sound" }
    }
  });

require(['src/MainGameScene' , 'src/Runner' , 'core/pixi.js' , 'core/tween.min' , 'preloadjs' , 'soundjs' ]
, function(MainGameScene , Runner , PIXI, TWEEN , PreloadJS , SoundJS)
{
  console.log("Endless Runner modules loaded.");

  var screenSize = { width : 960 , height : 500};
  var renderer = PIXI.autoDetectRenderer(screenSize.width , screenSize.height);

  new PIXI.loaders.Loader()
    .add("_assets/textures/p1_walk/Von.json")
    .add("_assets/textures/p2_walk/Don.json")
    .add("_assets/textures/p3_walk/Bon.json")
    .add("_assets/textures/tiles.json")
    .add("_assets/textures/textures.json")
    .once("complete" ,
      function()
      {
        var queue = new PreloadJS();
        SoundJS.alternateExtensions = ["mp3" , "ogg" , "wav" ];
        queue.installPlugin(SoundJS);
        queue.addEventListener("complete" , onFinishedLoading);
        queue.loadManifest(
          [
            {id : "bgm1"  , src : "_assets/bgm/bgm.mp3"}
           ,{id : "jump" , src : "_assets/sfx/jump.wav" }
           ,{id : "pickupcoin" , src : "_assets/sfx/pickupcoin.wav" }
          ]);
      })
    .load();

  function onFinishedLoading()
  {
    new MainGameScene(renderer , screenSize);
  }

  document.body.appendChild(renderer.view);
});

When I run the debugger it shows me that the PreloadJS object has this properties which I believe is not part of PreloadJS. I also checked if the prototype is correct but I am having Object as its prototype:

noConflict: function()
parse : function parse()
runInContext : function a(b, d)
stringify : function stringify()
__proto__ : Object

What else did I miss? Also I tried to shim PreloadJS like this:

    'preloadjs' : { exports : "createjs.LoadQueue" }
  , 'soundjs'   : { exports : "createjs.Sound" }

But I still get an object with those properties. I need RequireJS so I can have my SoundJS with a solid preloader. I cannot find any articles of using PreloadJS with RequireJS so definitely I believe I am doing something wrong, unconventional and undocumented so I will appreciate any help.

Answer 1

Okay, got it worked out. It's less than ideal but preloadjs is not written with AMD in mind. If your project absolutely requires you to include your dependencies via bower or something than this might be sub-optimal but in the face of absolutely no other fix I'm pretty content with this.

Basically, take your version of preloadjs, and wrap the entire file in a define() call:

define(function(){
    //Paste the contents of preloadjs here
    //After all the preloadjs code you need to return the reference to createjs:
    return this.createjs
});

Add this version to your dependency list and everything should work as normal.