|
1 | 1 | ---
|
2 |
| -title: What do you think of AMD vs CommonJS? |
| 2 | +title: What do you think of CommonJS vs ESM? |
3 | 3 | ---
|
4 | 4 |
|
5 | 5 | ## TL;DR
|
6 | 6 |
|
7 |
| -AMD (Asynchronous Module Definition) and CommonJS are two JavaScript module systems. AMD is designed for asynchronous loading of modules, making it suitable for browsers. CommonJS is designed for synchronous loading, making it more suitable for server-side environments like Node.js. AMD uses `define` and `require` for defining and loading modules, while CommonJS uses `module.exports` and `require`. |
| 7 | +JavaScript has evolved its module systems. ESM (ECMAScript Modules) using `import` / `export` is the official standard, natively supported in modern browsers and Node.js, designed for both synchronous and asynchronous use cases. CommonJS (CJS) using `require` / `module.exports` was the original standard for Node.js, primarily synchronous, and remains prevalent in the Node ecosystem. AMD (Asynchronous Module Definition) using `define` / `require` was an early system designed for asynchronous loading in browsers but is now largely obsolete, replaced by ESM. |
8 | 8 |
|
9 | 9 | ---
|
10 | 10 |
|
11 |
| -## AMD vs CommonJS |
12 |
| - |
13 | 11 | ### Overview
|
14 | 12 |
|
15 |
| -Both AMD and CommonJS are module systems used in JavaScript to manage dependencies and organize code. They serve different purposes and are suited to different environments. |
16 |
| - |
17 |
| -### AMD (Asynchronous Module Definition) |
18 |
| - |
19 |
| -#### Characteristics |
20 |
| - |
21 |
| -- Designed for asynchronous loading of modules |
22 |
| -- Primarily used in browser environments |
23 |
| -- Uses `define` and `require` for defining and loading modules |
24 |
| - |
25 |
| -#### Example |
26 |
| - |
27 |
| -```javascript |
28 |
| -// Defining a module in AMD |
29 |
| -define(['dependency1', 'dependency2'], function (dep1, dep2) { |
30 |
| - return { |
31 |
| - // Module code here |
32 |
| - }; |
33 |
| -}); |
34 |
| - |
35 |
| -// Loading a module in AMD |
36 |
| -require(['module1', 'module2'], function (mod1, mod2) { |
37 |
| - // Code that uses mod1 and mod2 |
38 |
| -}); |
39 |
| -``` |
| 13 | +Module systems help manage this complexity by allowing code to be split into reusable pieces (modules) with clear dependencies. Over time, different module systems emerged before an official standard was adopted. |
40 | 14 |
|
41 | 15 | ### CommonJS
|
42 | 16 |
|
@@ -64,37 +38,75 @@ const mod2 = require('module2');
|
64 | 38 | // Code that uses mod1 and mod2
|
65 | 39 | ```
|
66 | 40 |
|
| 41 | +### ESM (ECMAScript Modules) |
| 42 | + |
| 43 | +#### Characteristics |
| 44 | + |
| 45 | +- Official JavaScript standard module system |
| 46 | +- Supported natively in modern browsers and Node.js |
| 47 | +- Designed for both asynchronous and synchronous scenarios |
| 48 | +- Uses `export` and `import` for defining and loading modules |
| 49 | + |
| 50 | +#### Example |
| 51 | + |
| 52 | +```javascript |
| 53 | +import dep1 from 'dependency1'; // if dependency1 had a default export |
| 54 | +import { dep2 } from 'dependency2'; // named import to import something specific from dependency2 |
| 55 | + |
| 56 | +// Module code using dep1, dep2... |
| 57 | + |
| 58 | +export function someFunction() { |
| 59 | + // ... function logic ... |
| 60 | +} |
| 61 | +export const someValue = 'hello'; |
| 62 | + |
| 63 | +// Or export multiple things at once |
| 64 | +// export { someFunction, someValue }; |
| 65 | + |
| 66 | +// Or export a default value |
| 67 | +// export default class MyClass { |
| 68 | +// ... |
| 69 | +// } |
| 70 | +``` |
| 71 | + |
67 | 72 | ### Key differences
|
68 | 73 |
|
69 | 74 | #### Loading mechanism
|
70 | 75 |
|
71 |
| -- **AMD**: Asynchronous, suitable for browsers where non-blocking operations are crucial. |
72 |
| -- **CommonJS**: Synchronous, suitable for server-side environments where modules are loaded before execution. |
| 76 | +- **CommonJS**: Synchronous (blocks until loaded). |
| 77 | +- **ESM**: Asynchronous-friendly (non-blocking in browsers). |
73 | 78 |
|
74 | 79 | #### Environment suitability
|
75 | 80 |
|
76 |
| -- **AMD**: Better for client-side applications. |
77 |
| -- **CommonJS**: Better for server-side applications. |
| 81 | +- **CommonJS**: Node.js legacy standard. |
| 82 | +- **ESM**: Official standard (Browser & Node.js). |
78 | 83 |
|
79 | 84 | #### Syntax
|
80 | 85 |
|
81 |
| -- **AMD**: Uses `define` and `require`. |
82 |
| -- **CommonJS**: Uses `module.exports` and `require`. |
| 86 | +- **CommonJS**: `require()` / `module.exports`. |
| 87 | +- **ESM**: `import` / `export`. |
83 | 88 |
|
84 |
| -### Use cases |
| 89 | +#### Analysis |
85 | 90 |
|
86 |
| -#### AMD |
| 91 | +- **CommonJS**: Dynamic (runtime analysis). |
| 92 | +- **ESM**: Static (compile-time analysis, enables tree-shaking). |
87 | 93 |
|
88 |
| -- Suitable for web applications where you need to load modules asynchronously to avoid blocking the UI. |
89 |
| -- Often used with module loaders like RequireJS. |
| 94 | +### Use cases |
90 | 95 |
|
91 | 96 | #### CommonJS
|
92 | 97 |
|
93 |
| -- Suitable for server-side applications where modules are loaded once at the start. |
94 |
| -- The standard module system for Node.js. |
| 98 | +- Older Node.js projects or where sync loading is needed. |
| 99 | +- Default in Node.js unless configured for ESM. |
| 100 | + |
| 101 | +#### ESM |
| 102 | + |
| 103 | +- Modern web development (native browser support). |
| 104 | +- New Node.js projects, especially those needing async features or optimizations. |
| 105 | +- Code intended for both browser and server. |
95 | 106 |
|
96 | 107 | ## Further reading
|
97 | 108 |
|
98 |
| -- [RequireJS documentation](https://requirejs.org/docs/api.html) |
99 |
| -- [Node.js modules documentation](https://nodejs.org/api/modules.html) |
100 | 109 | - [MDN Web Docs on JavaScript modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)
|
| 110 | +- [Node.js: CommonJS modules](https://nodejs.org/api/modules.html) |
| 111 | +- [Node.js: ESM](https://nodejs.org/api/esm.html) |
| 112 | +- [RequireJS (AMD Loader - Historical)](https://requirejs.org/docs/api.html) |
0 commit comments