In the process of learning modular development, I believe everyone is familiar with CommonJS and ES Module. Before the emergence of modular development, most people still write all the code in a few JS files, resulting in our code is very bloated and difficult to maintain, every time to modify the code or reconstruction is a very headache. Since we began to learn modular development, we have separated the bloated code according to the code functions. The code maintenance and new functions are much simpler than before, saving us a lot of time to read the code. Improve our development efficiency. In this article, I will outline some of my knowledge and understanding of modular development.

CommonJS

After contacting Webpack, I believe that everyone is familiar with CommonJS specification require, exports, module.exports. Next, I will talk about the use and connection of these functions in Node.

1. require

Require is a function that helps us import objects from a file (module). The functionality of this function is very simple, so I will not use the basic, I have some details to share with you:

CommonJS loading is synchronous, so import code is synchronous and blocks subsequent code, but if loaded modules are cached and fields in the Module object are changed: loaded: true, it will not be loaded again.

Since the require import is an object, you can use some of es6’s methods for writing objects, such as destructing assignments.

The lookup rules imported by require are as follows:

/** * require(X) * 1. X is a core module, such as path, HTTP, directly return the core module, and stop looking for * 2. X is./ or.. Json, for example, will only find json files * if there is no suffix, there is a default order: * 1. X.js * 3. X.json * 4. X. ode * If no corresponding file is found, use X as a directory: * 1. X/index.js * 2. X/index.json * 3. X/index.node * 3. It is an X, and X is not a core module. * Start from node_modules in the current directory, and work your way up to node_modules. Not found. * /
Copy the code

2. With the module exports. Exports

Exports acts as an export in our code. In the CommonJS specification, we export exports and module.exports. In the following code, we export an object with attributes name and age in two different ways.

// Let's start with a piece of code
const name = 'lizhyu';
const age = '25';

exports.name = name;
exports.age = age;
// or
module.exports = {
  name: 'zhl'.age: 25
}
Copy the code

We have two default objects, exports and Module, for each file. Exports and require export data, which require receives. The principle here is that require is a node function that finds the exports object. Exports and require refer to the same memory address. As you can imagine, if we use let instead of const, then we change the name and then call the field in the export file dynamically.

Graph TD exports.js import obj --> X0111 memory

exports 与 module.exports(Interview)

Module. Exports = exports; module. Exports = exports; module. Module. Exports, module. Exports, require all refer to the same memory address. Exports is discarded when module.exports is defined. This is because once module.exports redefines the object, the memory address of exports is different from the memory address of Module. exports, so the functionality of exports is no longer valid.

Graph TD module.exports.js import obj --> X0112 memory exports.js import obj --> X0112 memory exports.js export obj --> X0111 memory

Loading order of modules (interview)

CommonJS uses a depth-first algorithm in the graph structure, in which one item in one layer is loaded step by step, and then it goes back to the next level to see if there are any modules that need to be loaded.

ES Module

As the name implies, this is the modular rule provided by ES, including import, exports and export default. For the specific functions and usage of these three methods, you can refer to the official es6 document [Syntax of Module]. I will mainly explain some knowledge points for attention here.

1. importAsynchronous module import, in the JS parsing phase2. import() Import modules on demand, which can be carried out in functions to alleviate the problem of slow loading3. export{} exports data, where {} is not an object, but a convention used to receive data, so you cannot use the syntactic sugar of ES4.In the JS engine, there is a module environment record handling, bind exported fields, similar to:constName = name (name is the exported field); If the name is changed asynchronously in the exported file, the name obtained in the imported file is the latest name value, becauseexportThe internal structure of;Copy the code