What Is JavaScript Modules?

When you are interviewing, it is very common to be asked about the knowledge of the bundler, and it is inevitable that you may be asked why you need to use the bundler or the implementation of the front-end engineering. Before answering these questions, you need to understand JavaScript modules. So in this note, we will let you know about the evolution and function of JavaScript modules.

What Is JavaScript Modules?

Developers refer to the process of dividing code or systems into different modules as modularization. Each module represents a complete small program or small function. All modules are assembled into a whole to complete the function requirements of the entire system.

Node.js has supported modularization almost since the beginning, while web development has been slow to support modularization, but today there are many tools that support front-end modularization.

Why Do We Need JavaScript Modules?

We can image that if we don't use the bundler and modular syntax, how to execute JavaScript in the browser?

• Method 1: Each function is a JavaScript script file and loaded. But this method will make the code difficult to extend, loading too many scripts will also lead to network bottlenecks, and there are also dependencies on the order of loading.
• Method 2: Use a unified large .js file that contains all the functions, but this will lead to maintenance and readability issues.

Before the modularization tool appeared, we would solve the above problems through some solutions. The most common one is to use IIFE (Immediately Invoked Function Expression), which actually uses the closure feature of the function to achieve data privacy and shared methods. As shown in the following example:

const muduleB = (function () {
  return {
    number: 200,
  };
})();

const moduleA = (function (otherModule) {
  let number = 100;

  function getNumber() {
    console.log(number + otherModule.number);
  }

  return { getNumber };
})(muduleB);

We can get the getNumber method through moduleA and realize the privatization of the number variable to prevent external calls. In addition, moduleA can also import other module, through this way, we can use other modules in moduleA, and solve many problems.

moduleA.getNumber(); // 300
moduleA.number; // undefined

IIFE's approach also becomes the source of the current modular concept. But as the front-end's demand for modules becomes larger and larger, some modular solutions have gradually emerged, and have evolved into general specifications, from CommonJS to the current ES Module (ESM). The next paragraph will introduce the general modular specifications.

JavaScript Modules Evolution

CommonJS

When Node.js was released, it brought new challenges. Because JavaScript is not running in the browser, there are no html files and script tags that can be added to it, so how should the Node application load different code? - Through CommonJS. The CommonJS specification was developed by the community in 2009, introducing the syntax of require and export declarations for modules, and a file is a module, which is loaded synchronously, so it is suitable for server-side development.

AMD (Async Module Definition)

AMD is the abbreviation of Asynchronous Module Definition. It originated from the Dojo Toolkit (a JavaScript Web application library). At the same time, AMD was designed for browsers from the beginning, and the most popular AMD implementation to date is RequireJS (a JavaScript module loader). AMD can automatically determine the dependency relationship, and the module is loaded asynchronously to avoid blocking, and multiple modules can be defined in the same file.

CMD (Common Module Definition)

CMD is the abbreviation of Common Module Definition. It was developed by Alibaba and Tencent in 2012. It is similar to AMD, but it is more suitable for browser development. In the specification, a file is a module.

UMD(Universal Module Definition)

AMD and CommonJS are the two most popular module standards, each with its own advantages and disadvantages. Developers usually choose different standards according to their own needs. But we may also use the code developed by different standards. One solution is UMD, which allows AMD and CommonJS to use the same file.

ES Module (ESM)

ES6 was released in 2015, and the module feature was finally realized, combining the advantages of CommonJS and AMD.

• Similar to CommonJS, introducing simple syntax such as export and import, and a file is a module
• Similar to AMD also supports asynchronous loading

Module Bundler

In the previous section, we have introduced the evolution of JavaScript modules, and the RequireJS tool that was created to allow us to use modules in the browser. However, although there are these module tools, due to the problems of browser module compatibility and compatibility, it is often the case that if you want to use the module written by others (such as the package on npm), it may not be able to reference it smoothly.

Because of the problem of browser module mechanism compatibility, the front-end industry later developed tools such as webpack to help developers bundle modules. So if your code contains a package from npm, webpack will help you bundle it so that it looks like a module you wrote yourself, which effectively solves the problem of browser module support.