system-bower

This is a plugin for SystemJS and StealJS that makes it easy to work with Bower.

The idea is to reduce the amount of manual configuring needed when using SystemJS/StealJS and instead leverage the metadata included in bower.json to have the configuration done for you.

Install

If you're using StealJS you don't have have to install this plugin, it's included by default.

If you're using SystemJS install this as another bower dependency:

bower install system-bower --save-dev

Use

To set things up you'll want to import your bower.json file using the plugin which will correctly configure the loader.

StealJS

In your config file simply import your bower.json using this module as the plugin. It is named bower:

// config.js
 
require("bower.json!bower");

In the future this won't be needed at all, and there will be a simpler way to enable the plugin.

SystemJS

System.paths.bower = "bower_components/system-bower/bower.js";
System.import("bower.json!bower").then(function() {
  // Configurations set, you can start importing stuff
});

Configuring

This plugin allows for a couple of options to optimize customization:

System.bowerPath

By default the plugin will assume dependencies are located at bower_components. Since a lot of people like to place their dependencies in another folder name you can change the lookup path with System.bowerPath.

System.bowerPath = "vendor";

With StealJS you can add this to your script tag:

<script src="bower_components/steal/steal.js"
  data-bower-path="vendor"></script> 

System.bowerDev

Using System.bowerDev will enable loading of devDependencies. This is useful when testing. It will only load your root devDependencies, not those of your dependencies. To enable just make the value truthy:

System.bowerDev = true;

or with StealJS

<script src="bower_components/steal/steal.js"
  data-bower-dev="true"></script> 

License

MIT