Table of Contents
As a remindet: JavaScript can be used for the frontend (browser) as well as the backend (serverside via Node.js). The following methods do apply to either one of them or sometimes both.
Asynchronous Module Definition (AMD)
AMD is a way to load JS asynchronously usually used in frontend applications.
define(['dep1', 'dep2'], function (dep1, dep2) {
//Define the module value by returning a value.
return function () {};
});The main implementation of the AMD functionality is done by RequireJS.
Therefore to use AMD to load more JS Modules you frst have to load RequireJS. See HERE
CommonJS (CJS)
CJS loads JS modules synchronously not like AMD.
//importing
const doSomething = require('./doSomething.js');
//exporting
module.exports = function doSomething(n) {
// do something
}CJS is primarily used in Node.js and therefore for serverside JavaScript. The modules are loaded via the command “require” and module definitions are done via “module.exports“.
CJS does NOT work in the browser.
Universal Module Definition (UMD)
After some time bot AMD as well as CJS generally used but they are not compatible with each other.
Therefore UMD was developed so JS can be written which is compatible with both AMD and CJS worlds.
(function (root, factory) {
if (typeof define === "function" && define.amd) {
define(["jquery", "underscore"], factory);
} else if (typeof exports === "object") {
module.exports = factory(require("jquery"), require("underscore"));
} else {
root.Requester = factory(root.$, root._);
}
}(this, function ($, _) {
// this is where I defined my module implementation
var Requester = { // ... };
return Requester;
}));But till now UMD is just used as a fallback if either AMD or CJS is not availalbe for your desired JS module. Why? See next chapter.
ES Modules (ESM – recommended variant)
ES modules are the “official” way how to write modular JS defined by the ES6 standard.
// in index.html
<script type="module" src="main.js"></script>
// in main.js
import {addTextToBody} from './util.js';
addTextToBody('Modules are pretty cool.');
// in util.js
export function addTextToBody(text) {
const div = document.createElement('div');
div.textContent = text;
document.body.appendChild(div);
}So its like the functionality of AMD (asynchron loading) notation of CJS.
Here an example where a module is “directly” loaded as well as an “asynchron” module after 5 seconds.
// index.html
<html>
<head>
<script type="module" src="main.js"></script>
</head>
<body></body>
</html>
// main.js
import {addTextToBody} from './util.js';
addTextToBody('Modules are pretty cool.');
setTimeout(function(){
import('./later.js')
.then(module => {
module.laterFuncton();
})
}, 5000);
// util.js
export function addTextToBody(text) {
const div = document.createElement('div');
div.textContent = text;
document.body.appendChild(div);
}
// later.js
export function laterFuncton() {
alert("hello");
}Browser-Support: https://caniuse.com/#feat=es6-module
Source: https://dev.to/iggredible/what-the-heck-are-cjs-amd-umd-and-esm-ikm