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

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'spackage.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 npmto explicitly install all of your projects external dependencies. Usehem to specify which dependencies (both external and local) shouldbe 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.jsonfile to ensure that the dependency is tracked in the future. Then specify thedependency 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-script2. 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/master2. 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 addingthose files to the app/ folder. Note that in order to expose your script viathe '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 thatby referencing your custom javascript or coffeescript via the 'libs' list inslug.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.jshem build# see your minified js in public/application.js

Notes

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