[RequireJS] Include own library in several projects



  • Hi there,

    I am currently working on a game-engine and try to build a game on top of it. By now the engine’s and the game’s files are in the same folder structure for testing purpose. But as I want to use the engine-“library” in several projects I want to divide engine and game sources.

    I am pretty sure, that there is a feature in Require.JS that allows this.

    Hope you can help me.
    Greetings, JF



  • I usually just put all of my game code in a folder called "src"
    Then I keep game engine specific code a sub folder called “src/library”.
    I keep 3rd party plugins, like polyfills, in another subfolder called: “src/library/plugins”



  • @d13
    Yeah, I thought of the same concept. But I’m pretty sure, that r.js has a feature for this.
    The problem is, that I work with GIT aswell, so it might get very messy if I wanted to keep the engine and the several games in their own git.


  • LDG

    I’ve been thinking of using git submodules to address this kind of setup. Right now, we keep our engine code in a separate repo and symlink it into each project. I feel like submodules would be a more elegant solution.

    Require.js also has some concept of “packages”. I don’t know a whole bunch about them, but I remember reading that they cannot be used with Almond, which is a deal-breaker for us.



  • @geoffb
    Thanks for your answer. I am currently deciding, whether I should use require-packages oder require-path.

    Greetings.



  • @geoffb @JF I would highly recommend not using submodules. The reason is that you can get into some painful issues that result from forgetting to update those submodules while switching branches.

    One option that I would recommend is using bower. You can point to any arbitrary git branch, commit, or tag.

    There is some debate as to whether or not you commit your bower files. I’ve tried both, but the consensus from the community seems to be to check them in.

    Here’s an example of bower in use without including it into the repo:

    https://github.com/david0178418/Turret-Command

    In my current active project, I’m actually including it.

    Btw, please ignore the crazy code. I’m still trying to figure out this game-dev stuff. This was me toying with an idea that I’m putting on the shelf for now.

    Oh…and if you actually opn it, it only works in chrome at the moment.


  • Patron

    Ahhh… guys…

    Sorry for the ignorance, but why don’t you just do something like this:

    var loadScript = function(src)
    {
     var bla = document.createElement("script");
     bla.src = src;
     document.body.appendChild(bla);
    }
    
    loadScript("game.js");
    

  • LDG

    @davidg said:

    I would highly recommend not using submodules. The reason is that you can get into some painful issues that result from forgetting to update those submodules while switching branches.

    Yeah…I’ve had to deal with these issues before on other code bases. It’s definitely a downside in that it requires careful updating.

    One option that I would recommend is using bower. You can point to any arbitrary git branch, commit, or tag.

    That’s interesting. I’ve seen Bower in passing but never really dug in. Off that bat, I like how they strive to be generic. I’ve often thought about browserify for dependency management, but since our games are closer to client-side JavaScript than Node.js, I’ve come to feel that RequireJS (and maybe Bower) are better fits. That said, I much prefer the CommonJS module definition syntax.


  • LDG

    @Josue said:

    Sorry for the ignorance, but why don’t you just do something like this:

    That’s a fair question, but a long and involved answer. I’d recommend reading Why Web Modules? and Why AMD? for a start.

    The problems with a simple script like you’ve shown is that it does nothing to address the problems of dependency resolution, scope, or loading order, just to name a few. It’ll work with simple code bases, but in applications of any complexity, it’ll start to be a real problem. Most languages have module/dependency management built in. That’s a important feature and one area where JavaScript is sorely lacking at the moment.


  • Patron

    @geoffb said:

    @Josue said:

    Sorry for the ignorance, but why don’t you just do something like this:

    That’s a fair question, but a long and involved answer. I’d recommend reading Why Web Modules? and Why AMD? for a start.

    The problems with a simple script like you’ve shown is that it does nothing to address the problems of dependency resolution, scope, or loading order, just to name a few. It’ll work with simple code bases, but in applications of any complexity, it’ll start to be a real problem. Most languages have module/dependency management built in. That’s a important feature and one area where JavaScript is sorely lacking at the moment.

    Hum… Yeah, it makes a lot of sense to use that if you’re depolying to the web, were latency is crucial, but… what are the advantages in a node-webkit based app like AWL?

    I mean, the user can wait a couple seconds until all the scripts load, right?



  • @davidg
    It works great with bower.

    Thanks for the advice!



  • @JF Glad to help!

    @geoffb Yeah. The CommonJS format is so much easier to deal with. Standard AMD’s results in parallel list hell.

    I’d actually thought about browserify as well, but when I’m doing anything javascript, I’m waaay to lazy to set up a build or watch task.

    The good news is that RequireJS supports the commonjs style. Since it’s still async, it’s purely sugar. I actually posted a short blurb about this a few months ago.

    Additional good news! Require and bower are completely orthogonal. Require loads dependencies at runtime, but bower is more of a package manager for your project.

    As an example, you can see in my bower.json file, I have lodash, phaser-official, and requirejs listed as dependencies.

    Since I don’t have these checked into my repository, if I clone this repo and run “bower install”, it will go grab the latest version of these. Alternatively, I could point them to some private git repo and lock it in to a particular branch, tag, or commit by just changing

     "requirejs": "latest",
     "lodash":    "latest",
      "phaser-official": "latest"
    

    to

      "requirejs": "git://some.location/myPersonRequireFork.git#myBranchName",
      "lodash": "git://some.location/myPersonLodashFork.git#myBranchName",
      "phaser-official": "git://some.location/myPersonPhaserFork.git#myBranchName",
      "djinn": ""git://some.location/myDjinnProject.git#myBranchName"
    

    I know it sounds like a bower and require “rah, rah” session, but…I just get excited talking about tools and I rarely do so outside of work. Lol.


Log in to reply