<blockquote>
<a href="https://github.com/amdjs/amdjs-api/blob/master/AMD.md">AMD (Asynchronous Module Definition)</a>, <a href="https://en.wikipedia.org/wiki/CommonJS">CommonJS</a>, and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules">ES (ECMAScript)</a> Modules are different module systems used in JavaScript, each with its own syntax and use cases.
</blockquote>
<h2>Background</h2>
JavaScript programs started off pretty small — most of its usage in the early days was to do isolated scripting tasks, providing a bit of interactivity to your web pages where needed, so large scripts were generally not needed. Fast forward a few years and we now have complete applications being run in browsers with a lot of JavaScript, as well as JavaScript being used in other contexts (Node.js, for example).
It has therefore made sense in recent years to start thinking about providing mechanisms for splitting JavaScript programs up into separate modules that can be imported when needed.
<hr />
<h2>CommonJS:</h2>
CommonJS modules are designed for server-side JavaScript and use a synchronous loading mechanism. Dependencies are loaded and executed one after the other.
<pre class="shiki github-dark shaku"><code>// Module A (a.js)const b = require('./b');console.log(b);// Module B (b.js)module.exports = 'Hello from Module B!';</code></pre>
<ul>
<li>Usage: CommonJS modules are commonly used in Node.js applications.</li>
<li>Syntax: CommonJS uses <code>require()</code> to import modules and <code>module.exports</code> or <code>exports</code> to export values.</li>
<li>Browser Support: CommonJS modules are not natively supported in browsers. To use them in a browser, tools like Browserify or webpack are often employed</li>
</ul>
<hr />
<h2>AMD (Asynchronous Module Definition):</h2>
AMD modules are designed for browser-side JavaScript and use an asynchronous loading mechanism. They allow for parallel loading of modules.
<pre class="shiki github-dark shaku"><code>// Module Adefine(['b'], function(b) { console.log(b);});// Module Bdefine([], function() { return 'Hello from Module B!';});</code></pre>
<ul>
<li>Usage: AMD modules are used in client-side web applications, especially when loading modules dynamically.</li>
<li>Syntax: AMD uses <code>define()</code> to declare modules, and <code>require()</code> to import dependencies.</li>
<li>Browser Support: AMD modules require a module loader like RequireJS to work in browsers. They are not natively supported.</li>
</ul>
<hr />
<h2>ES Modules (ES6+):</h2>
ES Modules are part of the ECMAScript specification (ES6 and later) and have native support in modern browsers and Node.js.
<pre class="shiki github-dark shaku"><code>// Module Aimport b from './b.js';console.log(b);// Module Bconst message = 'Hello from Module B!';export default message;</code></pre>
<ul>
<li>Static Analysis: ES Modules are statically analyzed, which means that imports and exports are resolved at compile-time, enabling better tooling and optimization.</li>
<li>Syntax: ES Modules use <code>import</code> and <code>export</code> statements to import and export values.</li>
<li>Browser Support: ES Modules have native support in modern browsers using the <code>import</code> and <code>export</code> keywords. No additional tools are needed for basic usage.</li>
</ul>

AMD, CommonJS and ES modules explained

It is good to understand the history of module systems of JavaScript, Even though usually ES Modules are used for the most cases. In case you are not …