About

Built to stream-line universal access to cdnjs.com's many hosted script packages, cdn.js offers a simple reliable way to bundle and package external javascript libraries for web applications. It's a lot like NPM or bower, except you don't have to run any command-line utilities to rebundle; you just change the URL or import statement in your code. The scripts load quickly, execute in-order, and automatically load from https if needed.

Download

CDN.js is small (30kb), but opens doors to hundreds of popular fully-hosted scripts. You can view it online or just download it and get going.

Libraries

These are the libraries that can be included by name:

Script Loading

CDN.js is great at loading many script tags at once, from a professional CDN. To load scripts, simply name them and specify a version that you want. You can use * instead of a version number to get the current stable version.

load underscore and zepto to use on the page

This has the effect of adding the following script tags to the document: They will be pipeline-downloaded, but executed in the order listed. If you somehow add the script tag linking to CDN.js after the page is done loading, it will download scripts one at a time instead of pipe-lining them. Both strategies allow you to manage dependencies by specifying an order of execution. For example, to use twitter-bootstrap javascript components, you need to load jQuery first: Depends work just like normal, scripts loaded via CDN will be available to the next script tag in document-order:

Module Loading

CDN.require()

CDN.js is great at loading commonjs modules. the require() method can be used sync or async, depending on if you pass it a callback. With a callback, you'll get the module's exports as the first argument to your callback, which is invoked when the module finishes loading, much like AMD/requirejs. Without a callback, your app will grind to a halt until the module has loaded and the result will be assigned to the require() function's return, just like in node.js.

CDN.require(script, callBack)

load underscore async (AMD style) and use it to total an Array of numbers:

CDN.require(script)

load underscore sync (node.js style) and use it to total an Array of numbers:

Script Injection

CDN.inject(script, callBack)

Like require() with a callback, inject() works on non-commonJS module scripts. the callback is invoked without any arguments, but after the external script is done loading and ready to be used.

inject a script on-demand after page loads, executing a callback when the script loads:

CDN.injectSync(script)

Like require() without a callback, injectSync() handles non-commonJS module scripts. The application pauses until the script loads at which point control is returned to subsequent expressions.

inject a script on-demand after page loads, but wait until it's parsed before returning flow to the program:

Other Features

CDN.compile()

CDN.compile() fetches the source code of all CDN-loaded scripts, and concats them together into a single String. Making it easy to bundle all your depends, you can save this string to a js file, and use it instead of CDN.js on distributed or offline-capable projects.

CDN.search(str_or_rx_term)

CDN.search() accepts a single String or RegExp argument and returns an Array of strings of all script package short-names that match.

CDN.injectScriptTag(strURL)

CDN.injectScriptTag() accepts a single String, the URL of a script file to add to the document, and returns the newly-created DOM SCRIPT Element to allow binding onload handlers, tag.remove()ing the script (cancelling) after a time-out period, etc. Outside of CDN-managed scripts, a simple dependency relationship can be accomplished by using a script's onload() event to dispatch the needy script: