Module loader implementation of no.js

Preface ： Recently No.js A simple module loader is implemented in , This paper briefly introduces the implementation of loader .

because JS There is no concept of module loading itself , With the development of the front end , Various loading technologies have also been developed , In the early seajs,requirejs, current webpack,Node.js wait , The background of module loader is the modularization of code , Because we can't write all the code to the same file , Therefore, the module loader mainly solves the problem of loading other modules in the module , Not just the front-end language ,c Language 、python、php The same is true .No.js The reference is Node.js The implementation of the . For example, we have the following two modules .
module1.js

const func = require("module2");
func();

module2.js

module.exports = () => {
    
	// some code
}

Let's see how to implement the function of module loading . First, let's look at the runtime execution time , How to load the first module .No.js During initialization, it will pass V8 perform No.js file .

const {
    
    loader,
    process,
} = No;
function loaderNativeModule() {
    
	//  Native  JS Module list 
    const modules = [
        {
    
            module: 'libs/module/index.js',
            name: 'module'
        },
    ];
    No.libs = {
    };
    //  initialization 
    for (let i = 0; i < modules.length; i++) {
    
        const module = {
    
            exports: {
    },
        };
        loader.compile(modules[i].module).call(null, loader.compile, module.exports, module);
        No.libs[modules[i].name] = module.exports;
        
    }
}

function runMain() {
    
    No.libs.module.load(process.argv[1]);
}

loaderNativeModule();
runMain();

No.js The logic of the file is mainly two , Load native JS Module and execution user JS. First, let's look at how to load native JS modular , Module loading is through loader.compile Realized ,loader.compile yes V8 Encapsulation of functions .

void No::Loader::Compile(V8_ARGS) {
    
    V8_ISOLATE
    V8_CONTEXT
    String::Utf8Value filename(isolate, args[0].As<String>());
    int fd = open(*filename, 0 , O_RDONLY);
    std::string content;
    char buffer[4096];
    while (1)
    {
    
      memset(buffer, 0, 4096);
      int ret = read(fd, buffer, 4096);
      if (ret == -1) {
    
        return args.GetReturnValue().Set(newStringToLcal(isolate, "read file error"));
      }
      if (ret == 0) {
    
        break;
      }
      content.append(buffer, ret);
    }
    close(fd);
    ScriptCompiler::Source script_source(newStringToLcal(isolate, content.c_str()));
    Local<String> params[] = {
    
      newStringToLcal(isolate, "require"),
      newStringToLcal(isolate, "exports"),
      newStringToLcal(isolate, "module"),
    };
    MaybeLocal<Function> fun =
    ScriptCompiler::CompileFunctionInContext(context, &script_source, 3, params, 0, nullptr);
    if (fun.IsEmpty()) {
    
      args.GetReturnValue().Set(Undefined(isolate));
    } else {
    
      args.GetReturnValue().Set(fun.ToLocalChecked());
    }
}

Compile First read the contents of the module , And then call CompileFunctionInContext function .CompileFunctionInContext The principle of the function is as follows . Suppose the file content is 1 + 1. After executing the following code

const ret = CompileFunctionInContext("1+1", ["require", "exports", "module"])

ret become

function (require, exports, module) {
    
	1 + 1;
}

therefore CompileFunctionInContext The function of is to encapsulate the code into a function , And you can set the formal parameter list of the function . Back to the original JS Loading process of .

 for (let i = 0; i < modules.length; i++) {
    
        const module = {
    
            exports: {
    },
        };
        loader.compile(modules[i].module).call(null, loader.compile, module.exports, module);
        No.libs[modules[i].name] = module.exports;     
}

First, through loader.compile And module content to get a function , Then pass in parameters to execute the function . Let's look at the original JS The code of the module .

class Module {
    
    // ...
};

module.exports = Module;

Finally, a Module Function and record to the global variable No in . The native module is loaded , Then execute the user JS.

function runMain() {
    
    No.libs.module.load(process.argv[1]);
}

Let's see. No.libs.module.load.

static load(filename, ...args) {
    
    if (map[filename]) {
    
        return map[filename];
    }
    const module = new Module(filename, ...args);
    return (map[filename] = module.load());
}

Create a new one Module object , And then execute his load function .

load() {
    
    const result = loader.compile(this.filename);
    result.call(this, Module.load, this.exports, this);
    return this.exports;
}

load Function final call loader.compile You get a function , Finally, pass in three parameters to execute the function , You can go through module.exports Get the export content of the module . And we see that as well , In the module require、module and exports Where did it come from , What is the content .

Postscript ： Let's just briefly introduce this , For those interested, please refer to https://github.com/theanarkh/js_runtime_loader, Another branch implements a Function Version of .