Search code examples
javascriptamdcommonjssystemjses6-module-loader

How can I specify library dependencies using SystemJS?


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?


Solution

  • 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.