How can I manage client-side JavaScript dependencies? [closed]

RequireJS does everything you need.

My answer to this question may help you.

Example:

Client app project hierarchy:

sampleapp
    |___ main.js
    |___ cs.js
    |___ require.js

main.js is where you initialize your client application and configure RequireJS:

require.config({
    baseUrl: "/sampleapp",
    paths: {
        jquery: "libs/jquery", // Local
        underscore: "http://underscorejs.org/underscore-min.js", // Remote
        backbone: "https://github.com/documentcloud/backbone/blob/master/backbone-min.js" // Remote on GitHub
    },
    shim: {
        backbone: {
            deps: ["underscore", "jquery"] // Backbone depends on jQuery and Underscore.js
        }
    }
});

require(["cs!someCoffeescriptFile", "jquery", "backbone", "underscore"], function (SomeCoffeescriptFile, $, Backbone, _) {
    // Dependencies are loaded...
    // Execute code
});

Dependencies will use the cs plugin when prepended by “cs!”. The cs plugin compiles the CoffeeScript file.

When you go in production, you can precompile your whole project with r.js.

node ./node_modules/requirejs/bin/r.js -o buildclientconfig.js

Here are your requirements:

  • Manage my client side dependencies in a format similar to npm’s
    package.json or Bower‘s component.json file. Different but as good!

  • I should have the flexibility to point to a Git repository or the actual JavaScript files (either on web or locally) in my dependency.json file for lesser-known libraries (npm lets you point to Git repositories). Yes

  • It should minify and namespace all libraries into a single file like Ender. That’s the only JavaScript file I would need to put in my script-tag on the client side. Yes with r.js.

  • It should have out of box support for CoffeeScript, like Box. Yes

  • In the browser I can use either require style or headjs. Yes

Leave a Comment