require 함수에 후크를 추가하는 방법을 심층적으로 학습하는 Node.js에 대한 간략한 분석

Node의 요구 기능에 후크를 추가하는 방법은 무엇입니까? 다음 글에서는 require 함수에 후크를 추가하는 방법을 보여드리겠습니다. 도움이 되기를 바랍니다.

Node.js은 Chrome V8 엔진을 기반으로 하는 JavaScript 런타임 환경입니다. 초기 Node.js는 CommonJS 모듈 사양을 채택했으며 Node v13.2.0부터 ES 모듈 기능을 공식적으로 지원했습니다. ES 모듈 기능이 안정되고 NPM 생태계와 호환되는 것은 v15.3.0이 되어서였습니다.

이 글에서는 Node.js의 require 함수 워크플로, Node.js가 ts 파일을 직접 실행하도록 하는 방법, Node.js의 require Hook 기능을 구현하는 함수입니다. 다음으로 먼저 <code>require 함수를 소개합니다. require 函数的工作流程、如何让 Node.js 直接执行 ts 文件及如何正确地劫持 Node.js 的 require 函数，从而实现钩子的功能。接下来，我们先来介绍 require 函数。

require 函数

Node.js 应用由模块组成，每个文件就是一个模块。对于 CommonJS 模块规范来说，我们通过 require 函数来导入模块。那么当我们使用 require 函数来导入模块的时候，该函数内部发生了什么？这里我们通过调用堆栈来了解一下 require 的过程：

由上图可知，在使用 require 导入模块时，会调用 Module 对象的 load 方法来加载模块，该方法的实现如下所示：

// lib/internal/modules/cjs/loader.js
Module.prototype.load = function(filename) {
  this.filename = filename;
  this.paths = Module._nodeModulePaths(path.dirname(filename));

  const extension = findLongestRegisteredExtension(filename);

  Module._extensions[extension](this, filename);
  this.loaded = true;
  // 省略部分代码
};

注意：本文所引用 Node.js 源码所对应的版本是 v16.13.1

在以上代码中，重要的两个步骤是：

• 步骤一：根据文件名找出扩展名；
• 步骤二：通过解析后的扩展名，在 Module._extensions 对象中查找匹配的加载器。

在 Node.js 中内置了 3 种不同的加载器，用于加载 node、json 和 js 文件。node 文件加载器

// lib/internal/modules/cjs/loader.js
Module._extensions['.node'] = function(module, filename) {
  return process.dlopen(module, path.toNamespacedPath(filename));
};

json 文件加载器

// lib/internal/modules/cjs/loader.js
Module._extensions['.json'] = function(module, filename) {
 const content = fs.readFileSync(filename, 'utf8');
 try {
    module.exports = JSONParse(stripBOM(content));
 } catch (err) {
   err.message = filename + ': ' + err.message;
   throw err;
 }
};

js 文件加载器

// lib/internal/modules/cjs/loader.js
Module._extensions['.js'] = function(module, filename) {
  // If already analyzed the source, then it will be cached.
  const cached = cjsParseCache.get(module);
  let content;
  if (cached?.source) {
    content = cached.source;
    cached.source = undefined;
  } else {
    content = fs.readFileSync(filename, 'utf8');
  }
  // 省略部分代码
  module._compile(content, filename);
};

下面我们来分析比较重要的 js 文件加载器。通过观察以上代码，我们可知 js 加载器的核心处理流程，也可以分为两个步骤：

• 步骤一：使用 fs.readFileSync 方法加载 js 文件的内容；
• 步骤二：使用 module._compile 方法编译已加载的 js 代码。

那么了解以上的知识之后，对我们有什么用处呢？其实在了解 require 函数的工作流程之后，我们就可以扩展 Node.js 的加载器。比如让 Node.js 能够运行 ts 文件。

// register.js
const fs = require("fs");
const Module = require("module");
const { transformSync } = require("esbuild");

Module._extensions[".ts"] = function (module, filename) {
  const content = fs.readFileSync(filename, "utf8");
  const { code } = transformSync(content, {
    sourcefile: filename,
    sourcemap: "both",
    loader: "ts",
    format: "cjs",
  });
  module._compile(code, filename);
};

在以上代码中，我们引入了内置的 module 模块，然后利用该模块的 _extensions 对象来注册我们的自定义 ts 加载器。

其实，加载器的本质就是一个函数，在该函数内部我们利用 esbuild 模块提供的 transformSync API 来实现 ts -> js 代码的转换。当完成代码转换之后，会调用 module._compile 方法对代码进行编译操作。

看到这里相信有的小伙伴，也想到了 Webpack 中对应的 loader，想深入学习的话，可以阅读 多图详解，一次性搞懂Webpack Loader 这篇文章。

地址：https://mp.weixin.qq.com/s/2v1uhw2j7yKsb1U5KE2qJA

篇幅有限，具体的编译过程，我们就不展开介绍了。下面我们来看一下如何让自定义的 ts 加载器生效。要让 Node.js 能够执行 ts 代码，我们就需要在执行 ts 代码前，先完成自定义 ts 加载器的注册操作。庆幸的是，Node.js 为我们提供了模块的预加载机制：

 $ node --help | grep preload
   -r, --require=... module to preload (option can be repeated)

即利用 -r, --require 命令行配置项，我们就可以预加载指定的模块。了解完相关知识之后，我们来测试一下自定义 ts 加载器。首先创建一个 index.ts

요구 기능

Node.js 애플리케이션은 모듈로 구성되며, 각 파일은 모듈입니다. CommonJS 모듈 사양의 경우 require 함수를 통해 모듈을 가져옵니다. 그렇다면 require 함수를 사용하여 모듈을 가져오면 함수 내부에서는 어떤 일이 발생할까요? 여기서는 호출 스택을 사용하여 require 프로세스를 이해합니다.

위 그림에서 알 수 있듯이 require를 사용하여 모듈을 가져오면 Modulecode> 객체의 load 메소드를 사용하여 모듈을 로드합니다. 이 메소드의 구현은 다음과 같습니다. 🎜

// index.ts
const add = (a: number, b: number) => a + b;

console.log("add(a, b) = ", add(3, 5));

🎜참고: 이 기사에 인용된 Node.js 소스 코드에 해당하는 버전은 v16.13.1 🎜

🎜위 코드에서 중요한 두 단계는 다음과 같습니다. 🎜

• 1단계: 파일 이름을 기준으로 확장자를 찾습니다.
2단계: 구문 분석된 확장을 통해 Module._extensions 개체에서 일치하는 로더를 찾습니다.

🎜 node, json 및 js code> 파일을 로드하기 위해 Node.js에 내장된 3가지 로더가 있습니다. . <strong>노드 파일 로더</strong>🎜<pre class="brush:js;toolbar:false;">$ node -r ./register.js index.ts</pre>🎜<strong>json 파일 로더</strong>🎜<pre class="brush:js;toolbar:false;">add(a, b) = 8</pre>🎜<strong>js 파일 로더</strong>🎜<pre class="brush:js;toolbar:false;">// lib/internal/modules/cjs/loader.js Module.prototype.load = function(filename) { this.filename = filename; this.paths = Module._nodeModulePaths(path.dirname(filename)); const extension = findLongestRegisteredExtension(filename); Module._extensions[extension](this, filename); this.loaded = true; // 省略部分代码 };</pre>🎜더 중요한<strong>js 파일 로더를 분석해 보겠습니다. </strong>. 위 코드를 관찰하면 <code>js 로더의 핵심 처리 흐름도 두 단계로 나눌 수 있음을 알 수 있습니다. 🎜

• 1단계: fs.readFileSync 사용 js 파일의 내용을 로드하는 메서드;
• 2단계: module._compile 메서드를 사용하여 로드된 js 코드 .

🎜위의 지식을 이해한 후에는 우리에게 어떤 용도로 사용됩니까? 실제로 require 함수의 작업 흐름을 이해한 후에는 Node.js 로더를 확장할 수 있습니다. 예를 들어 Node.js를 활성화하여 ts 파일을 실행하세요. 🎜

  module.exports = "hello world";

🎜위 코드에서는 내장 module 모듈을 도입한 다음 모듈의 _extensions 객체를 사용하여 사용자 정의 TS 로더를 등록했습니다. 🎜🎜사실 로더의 핵심은 함수입니다. 이 함수 내에서는 esbuild🎜 모듈은 ts -> js 코드 변환을 실현하는 transformSync API를 제공합니다. 코드 변환이 완료되면 module._compile 메서드가 호출되어 코드를 컴파일합니다. 🎜

🎜 이것을 보고 Webpack의 해당 로더를 생각한 친구들도 있을 것 같습니다. 더 알고 싶다면 여러 장의 사진과 함께 자세한 설명을 읽고 Webpack Loader 기사를 한 번에 이해할 수 있습니다. 🎜🎜주소: https://mp.weixin.qq.com/s/2v1uhw2j7yKsb1U5KE2qJA🎜

🎜공간이 제한되어 있어 구체적인 편집 과정을 소개하지 않겠습니다. 사용자 정의 TS 로더를 적용하는 방법을 살펴보겠습니다. Node.js가 ts 코드를 실행할 수 있도록 하려면 ts 코드를 실행하기 전에 사용자 정의 ts 로더 등록을 완료해야 합니다. 다행히 Node.js는 모듈 사전 로드 메커니즘을 제공합니다: 🎜

npm install --save pirates

🎜즉, -r, --require 명령줄 구성 항목을 사용하여 지정된 모듈을 사전 로드할 수 있습니다. 관련 지식을 이해한 후, 커스텀 TS 로더를 테스트해 보겠습니다. 먼저 index.ts 파일을 생성하고 다음 내용을 입력합니다: 🎜

// register.js
const addHook = require("pirates").addHook;

const revert = addHook(
  (code, filename) => code.replace("@@foo", "console.log('foo');"),
  { exts: [".js"] }
);

🎜 그런 다음 명령줄에 다음 명령을 입력합니다: 🎜

// index.js
console.log("@@foo")

🎜위 명령이 성공적으로 실행되면 콘솔에 다음이 출력됩니다. 내용: 🎜

add(a, b) =  8

很明显我们自定义的 ts 文件加载器生效了，这种扩展机制还是值得我们学习的。另外，需要注意的是在 load 方法中，findLongestRegisteredExtension 函数会判断文件的扩展名是否已经注册在 Module._extensions 对象中，若未注册的话，默认会返回 .js 字符串。

// lib/internal/modules/cjs/loader.js
Module.prototype.load = function(filename) {
  this.filename = filename;
  this.paths = Module._nodeModulePaths(path.dirname(filename));

  const extension = findLongestRegisteredExtension(filename);

  Module._extensions[extension](this, filename);
  this.loaded = true;
  // 省略部分代码
};

这就意味着只要文件中包含有效的 js 代码，require 函数就能正常加载它。比如下面的 a.txt 文件：

  module.exports = "hello world";

看到这里相信你已经了解 require 函数是如何加载模块及如何自定义 Node.js 文件加载器。那么，让 Node.js 支持加载 ts、png 或 css 等其它类型的文件，有更优雅、更简单的方案么？答案是有的，我们可以使用 pirates 这个第三方库。

pirates 是什么

pirates 这个库让我们可以正确地劫持 Node.js 的 require 函数。利用这个库，我们就可以很容易扩展 Node.js 加载器的功能。

pirates 的用法

你可以使用 npm 来安装 pirates：

npm install --save pirates

在成功安装 pirates 这个库之后，就可以利用该模块导出提供的 addHook 函数来添加钩子：

// register.js
const addHook = require("pirates").addHook;

const revert = addHook(
  (code, filename) => code.replace("@@foo", "console.log('foo');"),
  { exts: [".js"] }
);

需要注意的是调用 addHook 之后会返回一个 revert 函数，用于取消对 require 函数的劫持操作。下面我们来验证一下 pirates 这个库是否能正常工作，首先新建一个 index.js 文件并输入以下内容：

// index.js
console.log("@@foo")

然后在命令行输入以下命令：

$ node -r ./register.js index.js

当以上命令成功运行之后，控制台会输出以下内容：

console.log('foo');

观察以上结果可知，我们通过 addHook 函数添加的钩子生效了。是不是觉得挺神奇的，接下来我们来分析一下 pirates 的工作原理。

pirates 是如何工作的

pirates 底层是利用 Node.js 内置 module 模块提供的扩展机制来实现 Hook 功能。前面我们已经介绍过了，当使用 require 函数来加载模块时，Node.js 会根据文件的后缀名来匹配对应的加载器。 其实 pirates 的源码并不会复杂，我们来重点分析 addHook 函数的核心处理逻辑：

// src/index.js
export function addHook(hook, opts = {}) {
  let reverted = false;
  const loaders = []; // 存放新的loader
  const oldLoaders = []; // 存放旧的loader
  let exts;

  const originalJSLoader = Module._extensions['.js']; // 原始的JS Loader 

  const matcher = opts.matcher || null;
  const ignoreNodeModules = opts.ignoreNodeModules !== false;
  exts = opts.extensions || opts.exts || opts.extension || opts.ext 
    || ['.js'];
  if (!Array.isArray(exts)) {
    exts = [exts];
  }
  exts.forEach((ext) { 
    // ... 
  }
}

为了提高执行效率，addHook 函数提供了 matcher 和 ignoreNodeModules 配置项来实现文件过滤操作。在获取到 exts 扩展名列表之后，就会使用新的加载器来替换已有的加载器。

exts.forEach((ext) => {
    if (typeof ext !== 'string') {
      throw new TypeError(`Invalid Extension: ${ext}`);
    }
    // 获取已注册的loader，若未找到，则默认使用JS Loader
    const oldLoader = Module._extensions[ext] || originalJSLoader;
    oldLoaders[ext] = Module._extensions[ext];

    loaders[ext] = Module._extensions[ext] = function newLoader(
	  mod, filename) {
      let compile;
      if (!reverted) {
        if (shouldCompile(filename, exts, matcher, ignoreNodeModules)) {
          compile = mod._compile;
          mod._compile = function _compile(code) {
			// 这里需要恢复成原来的_compile函数，否则会出现死循环
            mod._compile = compile;
			// 在编译前先执行用户自定义的hook函数
            const newCode = hook(code, filename);
            if (typeof newCode !== 'string') {
              throw new Error(HOOK_RETURNED_NOTHING_ERROR_MESSAGE);
            }

            return mod._compile(newCode, filename);
          };
        }
      }

      oldLoader(mod, filename);
    };
});

观察以上代码可知，在 addHook 函数内部是通过替换 mod._compile 方法来实现钩子的功能。即在调用原始的 mod._compile 方法进行编译前，会先调用 hook(code, filename) 函数来执行用户自定义的 hook 函数，从而对代码进行处理。

好的，至此本文的主要内容都介绍完了，在实际工作中，如果你想让 Node.js 直接执行 ts 文件，可以利用 ts-node 或 esbuild-register 这两个库。其中 esbuild-register 这个库内部就是使用了 pirates 提供的 Hook 机制来实现对应的功能。

更多node相关知识，请访问：nodejs 教程！

위 내용은 require 함수에 후크를 추가하는 방법을 심층적으로 학습하는 Node.js에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!