min read

Using NPM with SystemJS

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 system.js and 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:

<script src="vendor/system.js"></script>


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:

map: {
"npm": "system-npm",
"npm-extension": "system-npm/npm-extension"
paths: {
"system-npm/*": "node_modules/system-npm/*.js"

This tells SystemJS how to load system-npm. Add the configuration script to your page after SystemJS:

<script src="config.js"></script>

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:

npmDependencies: [

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.