What is AMD, CommonJS, UMD, ESM?

Before, JS could not introduce tripartite modules, and all codes had to be written into a file, resulting in a large amount of code in a single file, unclear business function modules, and difficult to maintain. Writing modular code, on the other hand, helps make your code loosely coupled, which goes a long way toward building maintainable presentation engineering code. Based on this, more and more module specifications appear, such as CommonJS, AMD, UMD, ESM.

The AMD (Asynchronous Module Definitions) specification is known as RequireJS, which works in browsers. Commonjs is commonly used in Nodes, and Browserify is also available in browsers.

amd

Its usage is as follows:

// File name: foo.js define(['jquery'].function($) {// methodfunction myFunc() {}; // Expose public methodsreturn myFunc;
    });
Copy the code

The first part of the definition is a dependency array, and the second part is the callback function, which is executed only if the dependent component is available (script loaders like RequireJS take care of this part, including finding the file path).

Ideally, its dependencies would be loaded asynchronously, without blocking browser loading and rendering by injecting script in, but in practice this doesn’t work that well, so you need the AMD module to be a single file module and work with the require.js optimizer to render

The summary is as follows:

  • Asynchronous loading
  • It is proposed, mainly for the client browser
  • Its syntax is not intuitive and it is not as easy to write as CommonJS

commonjs

If you’ve ever written in Node, you’re probably familiar with the CommonJS style, which is used as follows:

// var $= require('jquery'); / / methodfunction myFunc() {}; Module.exports = myFunc; // exports of modules.Copy the code

The summary is as follows:

  • The syntax is similar to node because Node uses the CommonJS specification
  • Commonjs import modules are synchronous imports
  • It is mainly used on the back end, with Browserify for client use
  • Writing intuitive

umd

It is a unified specification of AMD and CommonJS that supports two specifications, namely, writing a single set of code that can be used in multiple scenarios. Its usage is as follows:

(function (root, factory) {
            if (typeof define === 'function' && define.amd) {
                // AMD
                define(['jquery'], factory);
            } else if (typeof exports === 'object'Module. Exports = factory(require() {// Node, CommonJS, etc. Module. Exports = factory(require()'jquery'));
            } else{// Browser global variable (root = window) root.returnexports = factory(root.jquery); } }(this,function($) {// methodfunction myFunc() {}; // Expose public methodsreturn myFunc;
        }));
Copy the code

Needless to say, it is also the most complicated

  • Both front and back ends are used
  • Unlike CJS or AMD, UMD is more like a pattern for configuring multiple modular systems.
  • UMD is often used as a backup module when using Bundler such as Rollup/ Webpack

ESM

ESM is a standard module system proposed by ES6. I believe you have used it

import React from 'react';
Copy the code
  • Many browsers are starting to support it
  • Have similar commonJS writing and synchronous and asynchronous loading mechanism
  • Can be used in HTML by setting type=module
  • Node also supports it

I believe the future ESM is the trend.

Finished!

Level co., LTD.

If there is any misunderstanding, please correct ~

Reference links:

Dev. To/iggredible /…

www.linkedin.com/pulse/amd-v…

[75. Team /post/ translator what is am…] (