How can I specify library dependencies using SystemJS?

Question

Using SystemJS, how do I specify that one library depends on another? For example, the Bootstrap JavaScript library depends on jQuery. Based on the SytemJS docs, I assumed I would specify this dependency using System.config.meta property:

System.config({
    baseUrl: './scripts',
    defaultJSExtensions: true,
    map: {
        jquery: './lib/jquery-2.2.0.min.js',
        bootstrap: './lib/bootstrap.min.js'
    },
    meta: {
        bootstrap: {
            deps: ['jquery']
        }
    }
});
System.import('./scripts/app.js');

But this seems to have no effect. When I run my application, the Bootstrap library throws a Bootstrap's JavaScript requires jQuery error - which means Bootstrap is being loaded before jQuery.

How can I ensure that jQuery is always loaded before Bootstrap?

Afterdamp

jQuery needs to be added to window explicitly. – Scever

@StephanBijzitter - can you provide an example? I'm not sure what that means in the context of SystemJS. – Afterdamp

window.$ = window.jQuery = require('jQuery'), put that code anywhere before the inclusion of the bootstrap files. It's ugly, but that's the way Twitter likes it. – Scever

Answer 1

After blindly changing things, I happened upon a configuration that seems to work. Here's my config:

System.config({
    defaultJSExtensions: true,
    paths: {
        jquery: './scripts/lib/jquery-2.2.0.min.js',
        bootstrap: './scripts/lib/bootstrap.min.js'
    },
    meta: {
        bootstrap: {
            deps: ['jquery']
        }
    }
});

System.import('./scripts/app.js');

I think the key was changing from map to paths.

EDIT

Side note: after learning a bit more about SystemJS, I'm discovering that it is much easier to let jspm do the hard work of managing my SystemJS configuration.

Afterdamp

This not work at me. I'm trying to solve this: #39529218 – Axial

If jquery is in node_modules, then this works => ...paths:{jquery:'node_modules/jquery/dist/jquery.js'}... – Kanazawa