How to manage client-side JavaScript dependencies? [closed]

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.

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

http://requirejs.org/ is the one you are looking for i believe

As @Guillaume86 I think hem will get you the closest to where you want to be.

In hem dependencies are managed using a combination of npm and hem. Use npm to explicitly install all of your projects external dependencies. Use hem to specify which dependencies (both external and local) should be stitched together for you client side operations.

I created a skeleton project of this so you can see how this would work - you can see it at https://github.com/dsummersl/clientsidehem

Adding dependencies

Use npm to search for a specific dependency and then modify the package.json file to ensure that the dependency is tracked in the future. Then specify the dependency for your application in slug.json.

For example, suppose you wanted to add the coffee-script dependency. Just use npm to install the dependency and save it to your package.json file:

1. npm --save install coffee-script
2. Manually edit the slug.json file. Add "coffee-script" to "dependencies".

Suppose you wanted to include your own module 'bloomfilters' and it wasn't in the npm registry. You could add it to your project in the following way:

1. npm --save install https://github.com/dsummersl/bloomfilters/tarball/master
2. Manually edit the slug.json file. Add "bloomfilters" to "dependencies".

Local modules

If you want to include your own coffee or javascript you can do so by adding those files to the app/ folder. Note that in order to expose your script via the 'require' method you must make it a CommonJS module. It is very simple - see the hem docs.

Local files

If you want to include non-CommonJS non 'require' code you can also stitch that by referencing your custom javascript or coffeescript via the 'libs' list in slug.json.

CSS

Hem will stitch together your CSS too, if you want. See the hem docs.

Building

Once you have your dependencies listed, you can use hem to stitch them all together.

# make sure all dependencies are present:
npm install .
# make public/application.js
hem build
# see your minified js in public/application.js

Notes

Hem was meant for the spinejs project - but you don't have to use it for that. Ignore any docs mentioning spine as you wish...

Well, I'm surprised that no one mentionned Browserify yet.

1. supports package.json format
2. uses npm underneath which can use a github (or any git) repo as package source
3. minifies and concatenates all dependencies into a single file.
4. supports coffeescript if you include it in your dependencies
5. require style all the way.
6. supports source maps

I'm pretty sure Hem meet your requirements (I use a personnal fork with additional compilers - jade and stylus - it's easy to customize to your needs). It uses npm to manage depedencies.