What is best practice for making a library like lodash globally available in Aurelia?

Question

I want to be able to use lodash ( _ ) in a convenient way, but am looking for the best 'Aurealia' way to do so. I can see a few options:

• Use a downloaded copy or CDN and simply include a <script> tag reference in index.html
• Install via npm or jspm (which??) and then either:
  • import it in every module, which seems tedious
  • use one of Aurelia's feature or plugin or globalResources or someother??? features to load it and make universally available.

The answer to this question seems to indicate in a generic way that using import is best, but I'm stumped as to how.

Answer 1

you can install the lodash with jspm

jspm install lodash

and then to consume it globally in you app using a global import as follow:

import 'lodash';

example: in your main file, it will load the lib globally in the window context.

// importing lodash as global resource
import 'lodash';     

import 'bootstrap';

import {Aurelia, LogManager} from 'aurelia-framework';
import {ConsoleAppender} from 'aurelia-logging-console';
import {authConfig} from './config/auth-config';

LogManager.addAppender(new ConsoleAppender());
LogManager.setLevel(LogManager.logLevel.debug);

export function configure(aurelia: Aurelia) {
    aurelia.use
        .defaultBindingLanguage()
        .defaultResources()
        .history()
        .router()
        .eventAggregator();

    aurelia.start().then(a => a.setRoot());
}

Answer 2

Great answer from Jeremy (as always). I'll just add up to that...

Try to use ES6 array methods wherever you can (Aurelia Purist standpoint). If you need some thing that cannot be replicated with native ECMAScript, or you really prefer to use lodash, install it using jspm:

jspm install lodash

lodash is an alias for npm:lodash defined in jspm registry. jspm will install lodash from npm's registry but will manage it itself - inside jspm_packages and with system.js module loader.

To use _ from your module, do an import:

import _ from 'lodash';

After that, you can use _ in your module code, like you would expected:

let result = _.map(...);

---

Edit: Thanks @VolkerRose for suggestion.

lodash modules with full installation

It's also possible to import only the functionality you need from lodash. If you need map function only, this is what you would use within your modules:

import map from 'lodash/map';
// ...
let result = map(...);

When lodash/map is required, jspm will find a lodash module folder (jspm_packages/npm/lodash@4.3.0 if version 4.3.0 is installed) and use the rest of the from value to search within that folder. In this case, all lodash modules/files are in the root folder - so map.js module is used. If there were any subfolders involved, you would need to use something like import map from 'lodash/some/sub/folder/map').

lodash modules with standalone installation

As @VolkerRose said in comment, lodash is modularized and you can install just the modules you need.

jspm install npm:lodash.map

This will install lodash's map module. Note that we need npm: prefix this time, since jspm doesn't have aliases for standalone lodash modules.

The lodash.map module can now be used similar as above:

import map from 'lodash.map';
// ...
let result = map(...);

Answer 3

These are my opinions- take with a grain of salt:

Aurelia Purist

The Aurelia Purist doesn't use lodash, instead opting to write modern javascript using the new array methods that ship with ES6. Sometimes the Aurelia purist consults you might not need underscore when he or she is in doubt. Other times the Aurelia purist consults you might not need jquery.

Aurelia Pragmatist

The Aurelia Pragmatist recognizes that Aurelia is just one tool in his or her toolbelt. The Aurelia framework, much like lodash and jQuery, help the Aurelia Pragmatist ship quality software that delights users. The Aurelia Pragmatist recognizes that there is more than one way to bake a cake and chooses to use the tools he or she is most effective with.

Answering the question...

You won't find anything in Aurelia that makes _ universally available with no strings attached. You can certainly make it a classic global OR you could install it with jspm and import it into each module as-needed. There's no middle ground that saves you from importing it AND saves you from feeling bad about using a global.

IMHO it's not the end of the world if your stuff has deps on the lodash global. It's a preference thing, your project certainly won't fail if you pick one or the other.