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>
Installing
system-npm is installed through NPM (of course!):
npm install system-npm --save-dev
Configuring
Next you'll want to configure SystemJS to know where to load the plugin. Create a config.js
file and add the appropriate config:
System.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:
<script>
System.import("package.json!npm").then(function(){
System.import("app/app");
});
</script>
Develop
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:
System.config({
npmDependencies: [
"jquery",
"backbone"
]
});
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.