system-npm is an amazing plugin for SystemJS that enables you to load your NPM dependencies with zero configuration. Just load system-npm and then load your project; require your NPM dependencies just as if you were in Node.
To use system-npm with SystemJS you'll first want to install SystemJS into your project. In this post we're assuming you've included
es6-module-loader.js in a
vendor/ folder, but you can place it where-ever you want. Then simply add a script tag to your page to load SystemJS:
system-npm is installed through NPM (of course!):
npm install system-npm --save-dev
Next you'll want to configure SystemJS to know where to load the plugin. Create a
config.js file and add the appropriate config:
This tells SystemJS how to load system-npm. Add the configuration script to your page after SystemJS:
Load your app
Now that it is configured you can load your
package.json using the plugin and then start up your applicaiton:
From here you can develop as you wish, sharing the same dependencies between Node and the Browser. system-npm will load your package.json and use the metadata. If you want to limit it to only loading your client-side deps, you can specify this in your configuration:
Doing this, system-npm will only load jquery and backbone as dependencies.
It's that simple. system-npm is a great way to instantly make your SystemJS projects nearly configuration-free.