AMD, CJS, UMD, ESM – Modular JavaScript

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

Share this post

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

The reCAPTCHA verification period has expired. Please reload the page.