What are JavaScript's CJS, AMD, UMD, and ESM

In the beginning, JavaScript did not have these mechanisms for the import / export All the code is in one file, which is a disaster.

After that, there was a problem that some mechanism changes only one file. So CJS, AMD, UMD and ESM . This short article is to let everyone know what these are.

CJS

The full name of CJS is CommonJS . It looks like this:

//importing 
const doSomething = require('./doSomething.js'); 

//exporting
module.exports = function doSomething(n) {
  // do something
}

CJS often appears in node development.

• CJS uses synchronization to introduce modules
• You can node_modules or a local directory. Such as: const someModule = require('./some/local/file'); .
• CJS imports a copy of the module.
• CJS does not work in the browser. To use in the browser, you need to transcode and package

AMD

The full name of AMD is the asynchronous module definition. Such as:

define(['dep1', 'dep2'], function (dep1, dep2) {
    //Define the module value by returning a value.
    return function () {};
});

or

// "simplified CommonJS wrapping" https://requirejs.org/docs/whyamd.html
define(function (require) {
    var dep1 = require('dep1'),
        dep2 = require('dep2');
    return function () {};
});

• AMD introduces modules asynchronously, hence the name
• ADM is for the front end
• AMD is not as intuitive as CJS

UMD

The full name of UMD is Universal Module Definition. Such as:

(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;
}));

• Can be used in front-end and back-end
• Unlike CJS and AMD, UMD is more like a mode for configuring a multi-module system
• UMD is usually a candidate for Rollup and webpack

ESM

The full name of ESM is ES Modules. Such as:

import React from 'react';

or

import {foo, bar} from './myLib';

...

export default function() {
  // your Function
};
export const function1() {...};
export const function2() {...};

• Can be used in many modern browsers
• Both front and back ends can be used. Simple syntax rules like CJS and AMD asynchronous Shake the tree
• ESM allows packaging tools such as Rollup and webpack to remove unnecessary code

• Call in HTML

  <script type="module">
  import {func1} from 'my-lib';
  
  func1();
  </script>

Not yet supported by all browsers.

to sum up

• ESM benefits from simple syntax, asynchrony and tree shaking, and is basically the best module mechanism.
• UMD can be used everywhere, so it is used as a backup packaging solution
• CJS is synchronous and is used more in the backend
• AMD is asynchronous and friendly to the front end

Thanks for reading!