Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Which bundle system should be used AMD, CommonJS, ES Module, IIFE, UMD and SystemJS

Tags:

javascript

RollupJS module bundler provides a list of possible outputs

  • AMD
  • CommonJS
  • ES Module
  • IIFE
  • UMD
  • SystemJS

Is there a rule of thumb which format should be chosen under a certain circumstance?

amd – Asynchronous Module Definition, used with module loaders like RequireJS
cjs – CommonJS, suitable for Node and Browserify/Webpack
es – Keep the bundle as an ES module file
iife – A self-executing function, suitable for inclusion as a <script> tag. (If you want to create a bundle for your application, you probably want to use this, because it leads to smaller file sizes.)
umd – Universal Module Definition, works as amd, cjs and iife all in one
system – Native format of the SystemJS 
like image 369
X.Creates Avatar asked Jul 26 '18 04:07

X.Creates


People also ask

What is AMD CommonJS and UMD?

cjs (CommonJS) — Suitable for Node and other bundlers (alias: commonjs ). amd (Asynchronous Module Definition) — Used with module loaders like RequireJS. umd (Universal Module Definition) — Works as amd , cjs , and iife all in one. es – Keep the bundle as an ES module file.

What is a UMD bundle?

UMD bundles allow loading separately compiled and deployed microfrontends.

Should I use CJS or ESM?

ESM is secure-ish by design The conclusion, here, is that ESM is a more secure module system than CJS and last, but not least, ESM is about syntax that cannot be replaced, while in CJS both module and exports can be replaced on the fly within the module itself.

What is the difference between RequireJS CommonJS and AMD loaders?

RequireJS is probably the most popular implementation of AMD. One major difference from CommonJS is that AMD specifies that modules are loaded asynchronously - that means modules are loaded in parallel, as opposed to blocking the execution by waiting for a load to finish.


1 Answers

Building modules and handling dependencies was cumbersome in the past. Newer solutions, in the form of libraries or ES2015 modules, have taken most of the pain away. If you are looking at starting a new module or project, ES2015 is the right way to go. It will always be supported and current support using transpilers and polyfills is excellent. On the other hand, if you prefer to stick to plain ES5 code, the usual split between AMD for the client and CommonJS/Node for the server remains the usual choice.

I recommend the lecture of this article, where you will find all the details, pros and cons for each module system :

https://auth0.com/blog/javascript-module-systems-showdown/

like image 51
colxi Avatar answered Sep 30 '22 18:09

colxi