How to manage client-side JavaScript dependencies?

Question

Although there are great solutions to manage dependencies on the server side, I could not find any that satisfies all my needs to have a coherent client side JavaScript dependency management workflow. I want to satisfy these 5 requirements:

1. Manage my client side dependencies in a format similar to npm's package.json or bower's bower.json
2. It should have the flexibility to point to git repo or actual js files (either on web or locally) in my dependency.json file for lesser known libraries (npm let you point to git repos)
3. It should minify and namespace all libraries into a single file like ender - that's the only js file I would need to put in my <script> tag in the client side
4. It should have out of box support for CoffeeScript like BoxJS4 (now dead)

5. In the browser, I should be able to use either require style:

   var $ = require('jquery');
   var _ = require('underscore');
   

   Or better yet, do headjs style:

   head.js(['jquery', 'underscore', 'mylib'], function($, _, mylib) {
     // executed when all libraries are loaded
   });
   

If no one such single tool exists, what is the best combination of tools i.e. a tool-chain that I can combine using something like volo (or grunt)?

I have already researched all the tools I have linked to in here and they satisfy only upto 3 of my requirements at best individually. So, please don't post again about these tools. I would only accept an answer that provides a single tool that satisfies all 5 of my requirements or if someone posts a concrete workflow/script/working example of a toolchain of multiple such tools that also satisfies all my requirements. Thank you.

Answer 1

require.js 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 require.js:

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
        }
    }
});

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 prod, you can pre-compile 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. Different but AS GOOD!

• I should have the flexibility to point to git repo or actual js files (either on web or locally) in my dependency.json file for lesser known libraries (npm let's you point to git repos). YES

• It should minify and namespace all libraries into a single file like ender - that's the only js file I would need to put in my script-tag in 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