JavaScript Module Loaders

Updated Sep 09, 2021#javascript#tooling#modules

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 - A JavaScript file and module loader, optimized for in-browser use, can also be used in Node, implements AMD.
  • SystemJS - A dynamic module loader that can load all kinds of JavaScript modules and many non-JavaScript modules, used in both browser and Node.
  • StealJS - A unique module loader because it can load JavaScript modules defined in ES6, AMD, and CommonJS formats
  • curl.js - 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.