RequireJS VS umd

There is a library called requirejs (https://requirejs.org/) that accomplishes what I am referring to. However, this is essentially similar to the situation in PHP prior to version 5.3 - a solution implemented at the level of a separate library rather than at the language level.

Webpack is the most popular bundler and it followed on the heels of Require.js, Rollup, and similar solutions. But the learning curve for a tool like webpack is steep. Getting started with webpack isn’t easy due to its complex configurations. As a result, in recent years another solution has emerged. This tool is not necessarily a front-runner, but an easier-to-digest alternative on the front-end module bundler landscape. Introducing Parcel.js.

I have a number of JavaScript "classes" each implemented in its own JavaScript file. For development those files are loaded individually, and for production they are concatenated, but in both cases I have to manually define a loading order, making sure that B comes after A if B uses A. I am planning to use RequireJS as an implementation of CommonJS Modules/AsynchronousDefinition to solve this problem for me automatically.

This may be a dumb question for web guys. But I am a little confused over this. Now, I have an application where I am using a couple of Javascript files to perform different tasks. Now, I am using Javascript bundler to combine and minify all the files. So, at runtime there will be only one app.min.js file. Now, Requirejs is used to load modules or files at runtime. So, the question is if I already have all things in one file, then do I need requirejs? Or what is a use case scenario where I can use requirejs and/or bundler?

AMD (Asynchronous Module Definition), is a pattern to define and consume module. It is implemented by RequireJS library. AMD provides a define function to define module, which accepts the module name, dependent modules’ names, and a factory function:

While reading RequireJS' source code, I stumbled upon this function:

A lot of SPA frameworks and libraries also were developed. We can find out some of its on the internet. They are AngularJs, Reactjs, BackboneJs, DurandalJs,.. and a lot of third party components to make the Javascript coding more easy like RequireJs, Amplifyjs, BreezeJs...

Check out this fascinating GitHub project for more examples of UMD formats.

UMD (Universal Module Definition) is a set of tricky patterns to make your code file work in multiple environments.

Exports in a umd format so the library works everywhere.

A module format is the syntax we use to define a module. Different module formats such AMD, CommonJS, UMD and System.register have emerged in the past and a native module format is now available since ES6.

Supports circular references

To make UMD build available on both browsers and Node.js, set globalObject option to 'this'.

A modular system that your compiled application will use. You can choose: None, CommonJS, AMD, System, UMD, ES6, ES2015, ES2020 or ESNext. For backend apps/packages ES6 or CommonJS is suitable depending on Node.js version you want to support. For frontend apps ES6 is also suitable. And for support of older browsers and isomorphic applications, UMD is definitely worth choosing.