如何手动实现一个 JavaScript 模块执行器

如果给你下面这样一个代码片段(动态获取的代码字符串),让你在前端动态引入这个模块并执行里面的函数,你会如何处理呢?

module.exports = { 
 name : 'ConardLi', 
 action : function(){ 
  console.log(this.name); 
 } 
}; 

node 环境的执行

如果在 node 环境,我们可能会很快的想到使用 Module 模块, Module 模块中有一个私有函数 _compile,可以动态的加载一个模块:

export function getRuleFromString(code) { 
 const myModule = new Module('my-module'); 
 myModule._compile(code,'my-module'); 
 return myModule.exports; 
} 

实现就是这么简单,后面我们会回顾一下 _compile 函数的原理,但是需求可不是这么简单,我们如果要在前端环境动态引入这段代码呢?

嗯,你没听错,最近正好碰到了这样的需求,需要在前端和 Node 端抹平动态引入模块的逻辑,好,下面我们来模仿 Module 模块实现一个前端环境的 JavaScript 模块执行器。

首先我们先来回顾一下 node 中的模块加载原理。

node Module 模块加载原理

Node.js 遵循 CommonJS 规范,该规范的核心思想是允许模块通过 require 方法来同步加载所要依赖的其他模块,然后通过 exports 或 module.exports 来导出需要暴露的接口。其主要是为了解决 JavaScript 的作用域问题而定义的模块形式,可以使每个模块它自身的命名空间中执行。

再在每个 NodeJs 模块中,我们都能取到 module、exports、__dirname、__filename 和 require 这些模块。并且每个模块的执行作用域都是相互隔离的,互不影响。

其实上面整个模块系统的核心就是 Module 类的 _compile 方法,我们直接来看 _compile 的源码:

Module.prototype._compile = function(content, filename) { 
 // 去除 Shebang 代码 
 content = internalModule.stripShebang(content); 
 
 // 1.创建封装函数 
 var wrapper = Module.wrap(content); 
 
 // 2.在当前上下文编译模块的封装函数代码 
 var compiledWrapper = vm.runInThisContext(wrapper, { 
  filename: filename, 
  lineOffset: 0, 
  displayErrors: true 
 }); 
 
 var dirname = path.dirname(filename); 
 var require = internalModule.makeRequireFunction(this); 
 var depth = internalModule.requireDepth; 
  
 // 3.运行模块的封装函数并传入 module、exports、__dirname、__filename、require 
 var result = compiledWrapper.call(this.exports, this.exports, require, this, filename, dirname); 
 return result; 
}; 

整个执行过程我将其分为三步:

创建封装函数

第一步即调用 Module 内部的 wrapper 函数对模块的原始内容进行封装,我们先来看看 wrapper 函数的实现:

Module.wrap = function(script) { 
 return Module.wrapper[0] + script + Module.wrapper[1]; 
}; 
 
Module.wrapper = [ 
 '(function (exports, require, module, __filename, __dirname) { ', 
 '\n});' 
]; 

CommonJS 的主要目的就是解决 JavaScript 的作用域问题,可以使每个模块它自身的命名空间中执行。在没有模块化方案的时候,我们一般会创建一个自执行函数来避免变量污染:

(function(global){ 
 // 执行代码。。 
})(window) 

所以这一步至关重要,首先 wrapper 函数就将模块本身的代码片段包裹在一个函数作用域内,并且将我们需要用到的对象作为参数引入。所以上面的代码块被包裹后就变成了:

(function (exports, require, module, __filename, __dirname) { 
 module.exports = { 
  name : 'ConardLi', 
  action : function(){ 
   console.log(this.name); 
  } 
 }; 
}); 

编译封装函数代码

NodeJs 中的 vm 模块提供了一系列 API 用于在 V8 虚拟机环境中编译和运行代码。JavaScript 代码可以被编译并立即运行,或编译、保存然后再运行。

vm.runInThisContext() 在当前的 global 对象的上下文中编译并执行 code,最后返回结果。运行中的代码无法获取本地作用域,但可以获取当前的 global 对象。

var compiledWrapper = vm.runInThisContext(wrapper, { 
 filename: filename, 
 lineOffset: 0, 
 displayErrors: true 
}); 

所以以上代码执行后,就将代码片段字符串编译成了一个真正的可执行函数:

(function (exports, require, module, __filename, __dirname) { 
 module.exports = { 
  name : 'ConardLi', 
  action : function(){ 
   console.log(this.name); 
  } 
 }; 
}); 

运行封装函数

最后通过 call 来执行编译得到的可执行函数,并传入对应的对象。

如何手动实现一个 JavaScript 模块执行器

扫一扫手机访问