Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 997
Nathan Friend Avatar asked Jan 25 '16 20:01

Nathan Friend


People also ask

How SystemJS works?

SystemJS works client side. It loads modules (files) dynamically on demand when they are needed. You don't have to load the entire app up front. You could load a file, for example, inside a button click handler.

What is the purpose of SystemJS?

SystemJS is a module loader that can import modules at run time in any of the popular formats used today (CommonJS, UMD, AMD, ES6). It is built on top of the ES6 module loader polyfill and is smart enough to detect the format being used and handle it appropriately.

What is SystemJS config JS?

The systemjs.config.js defines configuration for Path Normalization in SystemJS. You load something using SystemJS like this: System.import('app/main.js')

What is the need for SystemJS in angular?

Now systemjs understands that it needs to resolve and load @angular/core . It first goes through the process of checking mappings , as specified in the docs: The map option is similar to paths, but acts very early in the normalization process. It allows you to map a module alias to a location or package.


1 Answers

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.

like image 140
Nathan Friend Avatar answered Oct 12 '22 07:10

Nathan Friend