What are modules in JS/TS projects? How many forms are there? What is the difference between loaders and Bundlers? , author: Gentle_Zhou.

JS/TS projects require a dependency and module.exports to define a function. Json file with “commonjs” for Modules, so I wonder what Modules stand for and what they can do.

This paper will be divided into the following parts: What is Module? Why do we need Modules? Several common Module forms; Module loaders and Module bundlers.

What is a Module?

A Module is, by definition, a piece of code that can be reused (usually a feature, or a collection of features; It can be a file or a collection of files/folders), which encapsulates the details of the internal code implementation and exposes a public API so that other code can be easily loaded and used.

Why do we need Modules?

Technically speaking, to complete a JS/TS project, we do not need modules, directly handwritten code is also possible. But just as in JAVA and Python software projects, not introducing dependencies can cause programmers to write much of the same code over and over again.

Module was introduced to cope with the growing complexity of JS/TS project code. We need to use software engineering methods to manage the business logic of JS/TS projects.

In JS/TS projects, modules should allow us to implement the following:

  • Abstract code: Delegate functionality to specialized libraries so that we don’t have to know how they are actually implemented internally (no matter how complex)
  • Encapsulate code: If we don’t want to change any more code, we can hide it in a module
  • Reuse code: Avoid writing the same code over and over again
  • Managing dependencies: Easy to change dependencies without rewriting code

Several common Module forms

Before ES6 Modules, in ES5, JS did not provide an official rule for defining modules; So the talented programmers in the JavaScript community have experimented with various forms of module definition to achieve the effect of modules in their current runtime environment.

Some well-known module forms:

  • CommonJS the CommonJS form is used in node. js, and the require and module.exports form is used in CommonJS to define dependencies and modules:

    var dep1 = require('./dep1'); module.exports = function(){ // ... }Copy the code

  • Asynchronous Module Definition (AMD) Asynchronous Module Definition (AMD) Asynchronous Module Definition (AMD) Asynchronous Module Definition (AMD)

    Function define(['dep1', 'dep2'], function (dep1, dep2) {return function () {};  });Copy the code

  • Universal Module Definition (UMD) Universal Module Definition (UMD)

    (function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD. Define (['b'], factory); } else if (typeof Module === 'object' && module.exports) {// Node Node. Module. Exports = factory(require('b')); / / node.module. Exports = factory(require('b')); } else {// browser globals (root node is window) root.returnexports = factory(root.b); }}(this, function (b) {// return a value to define module export; Exported Value. return {}; }));Copy the code

And now the official ES6 module form, a native module form. It uses export to print the module’s public API:

Export function sayHello(){console.log('Hello'); }Copy the code

We can use import and AS to import parts of the code into the module:

import { sayHello as say } from './lib'; say(); Hello / / outputCopy the code

Or just introduce the whole module at the beginning:

import * as lib from './lib'; lib.sayHello(); Hello / / outputCopy the code

Module loaders and Module bundlers

Both are designed to make writing modular JS/TS applications easier and faster.

Module loaders

Module loaders are used to parse and load modules, usually libraries, written in a particular module format; You can load, interpret, and execute JavaScript modules defined using a specific module format/syntax, such as AMD or CommonJS.

When writing modular JS/TS applications, there is usually one file per module. Therefore, when writing an application consisting of hundreds of modules, it can be a pain to make sure that all the files are included in the right order. So it’s a lot easier if you have a loader that takes care of dependency management for you, making sure that all modules are loaded at application execution time.

Module loaders run at runtime:

  • Load the module loader in the browser
  • Tells the module loader which main application file to load
  • The module loader downloads and parses the main application file
  • The module loader downloads files as needed

If you try to open the Network TAB in your browser’s developer console, you’ll see that many files are loaded on demand by the module loader:

Some examples of popular module loaders are as follows:

  • RequireJS: Module loader in AMD format
  • SystemJS: module loader in AMD, CommonJS, UMD or System.register format

Module bundlers

The module binder is a substitute for the module loader; Basically, they do the same thing (managing and loading interdependent modules).

But the module binder differs from the loader in that it is not run at runtime, but as part of the application build (run at build time); And it’s loaded in a browser. Therefore, the binder consolidates all modules into a file /bundle (such as bundle.js) before executing the code, rather than loading the dependencies that appear while the code is running. There are two popular bundlers: Webpack (AMD,CommonJS, ES6 module Bundler) and Browserify (CommonJS module Bundler).

When is it better to use which one?

The answer to this question depends on the structure and size of your JS/TS application.

The main advantage of Using Bundler is that it allows the browser to download far fewer files, which gives our application a performance advantage (because of the reduced load time). But depending on the number of modules in your application, Bundler isn’t always the best. For large applications (with many modules), module loaders can provide better performance because Bundler loads a huge single file at the beginning and blocks application startup.

How to choose, in fact, we only need to test the comparison can ~

Refer to the link

  1. V8. Dev/features/mo…
  2. www.geeksforgeeks.org/node-js-mod…
  3. www.jvandemo.com/a-10-minute…
  4. Stackoverflow.com/questions/3…

Click to follow, the first time to learn about Huawei cloud fresh technology ~