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.
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.