Skip to navigation
What means AMD, CJS, UMD, ESM in JavaScript
15.06.22
M stands for Modular 4 modulations: 1. Asynchronous Module Definition (AMD) 2. CommonJS (CJS) 3. Universal Module Definition (UMD) 4. ES Modules (ESM – recommended variant) 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 // 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 // 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"); }
https://www.devguide.at/en/javascript/amd-cjs-umd-esm-modular-javascript/
Reply
Anonymous
Information Epoch 1752116109
Think parallel.
Home
Notebook
Contact us