JavaScript Module Loaders

Feb 20, 2020 • ☕️ 2 min read

Modular programming has many benefits; when you write modular JavaScript applications, you usually end up having one file per module.

In the old day, modules in JavaScript were implemented via libraries like CommonJS Modules (CJS), Asynchronous Module Definition (AMD), and Universal Module Definition (UMD). Since ES2015, JavaScript had built-in modules called ECMAScript Modules (ESM).

Besides the above popular JavaScript modules, we also consider other JavaScript module formats like System.register or global; and non-JavaScript modules like JSON modules, CSS modules, or Web Assembly.

Module loaders are libraries that can handle loading modules using the above formats for further processing or executing, they may be different in terms of synchronous or asynchronous loading, static or dynamic loading.

When you write modular JavaScript applications, you usually end up having one file per module. So when writing an application that consist of hundreds of modules it could get quite painful to make sure all files are included and in the correct order. So basically a loader will take care of the dependency management for you, by making sure all modules are loaded when the application is executed.

RequireJS is a JavaScript file and module loader, optimized for in-browser use, can also be used in Node, implements AMD.

SystemJS is a dynamic module loader that can load all kinds of JavaScript modules and many non-JavaScript modules, used in both browser and Node.

StealJS is a unique module loader because it can load JavaScript modules defined in ES6, AMD, and CommonJS formats

curl.js is small, fast, extensible module loader that handles AMD, CommonJS Modules/1.1, CSS, HTML/text, and legacy scripts.

ES Module Loader has been implemented in most browsers, available in Node.js via --experimental-modules flag.

Above module loaders are actually used at runtime to load and execute scripts. Don’t be confused with loaders used in built tools which used at build-time to pre-process files as you import or load them, they are kind of tasks that transform modules from one format to other format.

Related Posts

Benefits of side projects

At any given time, I have a side project running. It help me to learn new skills, meet new people and provide a different context in which to showcase my strengths

Build systems

Tools that automate a variety of tasks like compiling, packaging, testing and more

React carousel components

Notable lightweight and customizable React components usable out-of-the-box

Are you truly innovative?

Improving a product or process is not innovative. To innovate, you have to start from a completely blank slate