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?

@StephanBijzitter - can you provide an example? I'm not sure what that means in the context of SystemJS. — Nathan Friend
– Nathan Friend, Commented Jan 25, 2016 at 20:41
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. — Stephan Bijzitter
– Stephan Bijzitter, Commented Jan 25, 2016 at 20:43

Nathan Friend · Accepted Answer · 2016-02-03 20:08:56Z

4

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.

edited Feb 3, 2016 at 20:08

answered Feb 3, 2016 at 16:24

Nathan Friend

12.9k12 gold badges81 silver badges131 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

smartmouse Over a year ago

This not work at me. I'm trying to solve this: stackoverflow.com/questions/39528718/…

Aakash Over a year ago

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

Collectives™ on Stack Overflow

How can I specify library dependencies using SystemJS?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related