This article provides a brief introduction to package managers and module loaders within the context of the Aurelia front end build-pipline.
The popularity of NPM along with its ability to manage client-side as well as server-side dependencies has led to it being selected as the recommended package manager for Aurelia projects. Because of this, you’ll more likely find NPM-related assistance in official Aurelia documentation and sample code.
It’s possible to achieve these key benefits just using the module pattern without the use of a module loader. However, alone do not provide us with a mechanism for how to combine them together in various ways and load them into our browser. That’s where module loaders come in. Module loaders provide a way of declaring modules as dependencies of other modules. For example, in the first iteration of the my-books sample application, there are three modules: app, add-book, and list-books. The app module depends on the add-book, and list-books modules. Without a module loader, you’d need to be careful to include references the add-book, and list-books files first, so that these modules were loaded into the web page before the app module. In the case of a module loader, you simply declare the add-book, and list-books modules as dependencies of the app module, and the module loader takes care of loading these files into the browser at the appropriate time. Module loaders typically provide two advantages when it comes to how we load dependencies in the browser:
- Asynchronous module loading: In this case, we can load multiple modules in parallel. For example, we could load the add-book, and list-books modules asynchronously before loading the app module. This module loading is done in a non-blocking fashion using callbacks.
- Lazy module loading: Modules are loaded only when you need them and not before.