![Stories in Ready](https://badge.waffle.io/home-buddy/cdnpm.png?label=ready&title=Ready)
cdnpm
Note: This is obviously not remotely complete.
Rationale
Systems like browserify and webpack allow us to use reasonable dependency management in our front-end projects, with all the related benefits like easily staying up-to-date. However, CDN-hosted libraries offer speed, free bandwidth, and may already be primed in a user's browser cache, but with the caveat that one must manually manage versions and script tags. The goal of cdnpm
is to allow us to manage our CDN references in the same fashion that we manage our npm dependencies, and providing us the benefits of both approaches.
In prod, we will have certain large deps pulled in via CDN with versions that exactly match what we pulled in via npm locally (or in dev).
Usage
While not required, you will probably be using browserify or webpack to create a js bundle for your app. To extract CDN-able deps from your project you will:
- Run
cdnpm stats
to see which deps you can extract - Use the API to add these deps to your
index.html
- Add these deps to
- Serve your project with deps pulled in via CDN up-to-date (as much as your
node_modules
anyhow ;-)
Node API
Usage
var cdnpm = require('cdnpm')();
Note: config is currently unused (future use)
getScriptTags
var cdnpm = require('cdnpm')();
var getScriptTags = cdnpm.getScriptTags;
...
getScriptTags().then(function(depScriptTags) {
templateEngine.template(stringVar, {
depScriptTags: depScriptTags
});
});
getScriptTags
returns a promise for the html markup for relevant script tags. You will want to template this into your index.html
wherever you deem appropriate for these libraries.
getWebpackExternals
var cdnpm = require('cdnpm')();
var getWebpackExternals = cdnpm.getWebpackExternals;
...
getWebpackExternals().then(function(webpackExternalsConfig) {
});
getWebpackExternals
returns a promise for an object that can be used as your webpack config's externals
property.
CLI Commands
cdnpm stats
This command looks in your package.json
for packages that are also hosted on CDN. It then reports the versions and (minified) sizes of those packages on the CDN. This gives an idea of how much one could reduce their bundle size by using the CDN version.
cdnpm dry-tags
Dry run to see what script tags get returned by the API. Useful to ensure that these are indeed the scripts you are looking for.
cdnpm dry-webpack
Dry run to see what webpack externals config gets returned by the API.