Package Manager: Bower vs jspm

How is Bower different than jspm? Can Bower provide jspm functionality about SystemJS universal module loader?

Solution 1:

Well JSPM is much larger and ambitious project than Bower. Bower has only one purpose-to download source files you need from the web to your hard disk. For you as a consumer, bower doesn't do anything else. If you want to execute script files from bower, you need to create your script tags for each of them.

While jspm is not only a module downloader. It downloads by default systemjs that you have mentioned. SystemJS is implemented as closely to https://whatwg.github.io/loader/ as possible. Actually author of JSPM is very active participant of the specification process. With systemjs, today you are able to load ES6(by transpiling them in the browser), CommonJS or AMD modules in the browser without building them. Not only ES6 modules, but all the other ES6 features supported by traceur/babeljs/typescript. Depending on which compiler you choose when running jspm init. SystemJS works 1:1 in node.js as well as in browser, so unit testing your app is easily done.

Also it can build the bundle for you(jspm build) when you need to go to production. So it is obvious that jspm(+systemjs) is a more powerful tool. So as a rule of thumb:

• need to quickly get jquery and include it in your serverside templated html? Go with a regular script tag. Bower has been deprecated.
• need to build large JS app? Go with Webpack. JSPM has failed to reach critical mass and everyone's doing webpack now.

Solution 2:

To add on to Capaj's answer:

If you have a small project, go with jspm anyway! It's the future! (who knows, things change, but this is a good bet).

Small project use:

$ jspm install jquery

then in your HTML:

    <script src="jspm_packages/system.js"></script><!-- required -->
    <script src='config.js'></script><!-- required -->
    <script type="module">
        System.import('path/to/your/main.js')
    </script>

then in main.js:

import $ from 'jquery'; // ES6-style import
// do whatever with jQuery here.

You can use CommonJS, AMD, or ES 6 module formats. JSPM auto-detects them in your files (you can't mix and match in the same file though).

var $ = require('jquery'); // CommonJS-style import
// do whatever with jQuery here.

define(['jquery'], function($) { // AMD-style import
    // do whatever with jQuery here.
})