This article will give a brief introduction in common Javascript module systems.
For longer descriptions see this great article.
Term definitions
- Bundler: Ties up modularized Javascript-files to, in most cases, one file, which can be included in HTML-Page
- Loader: loads modularized Javascript-files, while HTML-Page is loading
- Transpiler: Translates Javascript files in Browser-compatible syntax, e.g. for ES6, Typescript or Coffeescript
- AMD: Asynchronous module definition
- UMD: Universal module definition
- ES6: ECMAScript 6
Overview
| Module-System | Module-Bundler | Module-Loader | Module-Transpiler | Native Interface | Favourite testing tool |
|---|---|---|---|---|---|
| Module pattern | - | - | - | HTML with <script>-Tags |
Qunit |
| CommonJS: exports + require | Browserify | - | - | Node | Mocha |
| AMD: define + require | R.js (Requirejs) | RequireJS or Curl | - | (HTML with loader-dep) | - |
| ES6: import and export | - | - | Babel/Rollup | Node*, HTML** | Mocha after transpilation |
| UMD: Design pattern to support AMD and CJS | - | - | - | Node, HTML | Qunit/Mocha |
* Node supports nearly all features since 8.2.1
** Currently transpiler are still needed
Three tools are still missing in the table, because they have a special role:
- SystemJS: A module loader which supports all module systems
- Webpack: Main task is module bundling, but it has also support for module loading and transpiling (with help of plugins)
- Parcel: A new star at the module horizon? Promise is same functional range as Webpack but without configuration => Currently not used by the author
Some example source code for using the different module systems can be found at my Github example project