JavaScript Module Loaders

October 31, 2019 • ☕️ 1 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.

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.

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

Above module loaders are built for browsers and Node. Don’t be confused with module loaders used in build-tools, they are plugins used to load JavaScript source in multiple formats and non-JavaScript static assets for processing and transformation. In the end, they’ll output module formats that browser or Node can understand.