Node.js深入学习之浅析require函数中怎么添加钩子

2023-05-16

如何为 Node 的 require 函数添加钩子?下面本篇文章就来带大家了解一下require函数中添加钩子的方法,希望对大家有所帮助!

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境。早期的 Node.js 采用的是 CommonJS 模块规范,从 Node v13.2.0 版本开始正式支持 ES Modules 特性。直到 v15.3.0 版本 ES Modules 特性才稳定下来并与 NPM 生态相兼容。

本文将介绍 Node.js 中 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 种不同的加载器,用于加载 nodejson 和 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 文件并输入以下内容:

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

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

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

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

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

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 支持加载 tspng 或 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 教程!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Node.js深入学习之浅析require函数中怎么添加钩子 的相关文章

  • 浅谈PHP遍历数组之for循环语句

    数组是一个非常基础和重要的数据结构 xff0c 当我们创建好一个数组后 xff0c 就需要去操作它 xff1b 而数组最常见的一个操作就是循环遍历 PHP中支持多种遍历数组的方法 xff0c 今天我们就来学习如何利用for循环语句来遍历数组
  • 软件测试 | 测试开发 | Python中日志异步发送到远程服务器

    背景 在Python中使用日志最常用的方式就是在控制台和文件中输出日志了 logging模块也很好的提供的相应 的类 使用起来也非常方便 但是有时我们可能会有一些需求 如还需要将日志发送到远端 或者直接写入数 据库 这种需求该如何实现呢 S
  • 笔记本外接显示器闪烁问题

    笔记本外接显示器闪烁问题 最简单的一个解决方法 xff1a 就是不要把显示器和笔记本的电源插到同一个排插上
  • 8种CSS实现loading加载特效的小技巧(分享)

    本篇文章给大家分享8种CSS实现loading加载特效的小技巧 xff0c 希望对大家有所帮助 xff01 为什么会写这种文章呢 xff1f 平时开发的时候 xff0c 我们遇到加载 xff0c 要么是UI框架中自带 xff0c 要么就是百
  • 值得收藏的26个css面试题,增强你的CSS基础!

    CSS在网页设计中非常流行 xff0c 可以减少结构内容中的复杂性和重复 本篇文章给大家分享26个基于css的面试题 xff0c 可以增强你的CSS基础 xff0c 快来学习吧 xff08 学习视频分享 xff1a css视频教程 xff0
  • JavaScript中关于“this”的7个有趣面试题,你能全答对吗?

    相关推荐 xff1a 2021年大前端面试题汇总 xff08 收藏 xff09 在 JavaScript 中 xff0c this 是函数调用上下文 正是由于 this 的行为很复杂 xff0c 所以在 JavaScript 面试中 xff
  • 分享几种实用的Node.js调试方法,快来收藏吧!!

    本篇文章给大家介绍Nodejs调试的几种方式 有一定的参考价值 xff0c 有需要的朋友可以参考一下 xff0c 希望对大家有所帮助 相关推荐 xff1a nodejs 教程 第一种 1 打开 vscode 内置终端 xff0c 右上角选择
  • 聊聊在VSCode中怎么点击DOM 自动定位到相应代码行?

    如何在 Vue 项目中 xff0c 通过点击 DOM 自动定位VSCode中的代码行 xff1f 下面本篇文章就来给大家分享一个插件 xff0c 并聊聊实现原理 xff0c 快来收藏吧 xff01 现在大型的 Vue项目基本上都是多人协作开
  • 一文深入了解 Node 中的事件循环

    Node js是单线程的语言 xff0c 是通过事件循环处理非阻塞I O操作的 下面本篇文章带大家详细了解 Node 中的事件循环 xff0c 希望对大家有所帮助 xff01 Node js 做为 JavaScript 的服务端运行时 xf
  • 深入解析vue中的key,看看key到底能拿来干嘛!

    key到底有什么用途 xff1f 下面本篇文章给大家深度解析一下vue中的key xff0c 看看key到底能拿来干嘛 xff0c 希望对大家有所帮助 xff01 vue中关于key的深度解析 key到底有什么用途 先来看官方解释 key属
  • 一文聊聊Node.js中的模块路径解析

    本篇文章带大家了解一下Node js中的模块路径解析 xff0c 介绍一下Node模块路径解析方法 xff0c 希望对大家有所帮助 xff01 require案例 当前有一个项目当前项目路径 Users rainbow Documents
  • 聊聊node中怎么借助第三方开源库实现网站爬取功能

    本篇文章给大家介绍一下node中借助第三方开源库轻松实现网站爬取功能的方法 xff0c 希望对大家有所帮助 xff01 nodejs实现网站爬取功能 第三方库介绍 request 对网络请求的封装 cheerio node 版本的 jQue
  • Angular中非父子组件间怎么通讯

    Angular中非父子组件间怎么通讯 xff1f 本篇文章给大家介绍一下Angular非父子组件之间通过服务通讯的方法 xff0c 希望对大家有所帮助 xff01 其实提到父子组件之间传值 xff0c 对我们来说 xff0c 再熟悉不过了
  • 软件测试 | 测试开发 | Django+Celery框架自动化定时任务开发

    本章介绍使用DjCelery即Django 43 Celery框架开发定时任务功能 xff0c 在Autotestplat平台上实现单一接口自动化测试脚本 业务场景接口自动化测试脚本 App自动化测试脚本 Web自动化测试脚本等任务的定时执
  • 认识一下vue中的$attrs和$listeners属性,聊聊用法

    本篇文章带大家了解一下vue中封装组件利器 xff1a attrs listeners属性 xff0c 看看它们的用法 xff0c 希望对大家有所帮助 xff01 多级组件嵌套需要传递数据时 xff0c 通常使用的方法是通过vuex 但仅仅
  • 深入了解node.js中的module-alias(分享一些避坑方法)

    本篇文章带大家了解一下node js中的module alias xff0c 介绍一下module alias原理 module alias的一个常见问题 xff08 坑 xff09 xff0c 希望对大家有所帮助 xff01 首先有必要介
  • 聊聊Nodejs中的核心模块:stream流模块(看看如何使用)

    本篇文章带大家详细理解一下Nodejs中的stream流模块 xff0c 介绍一下stream流概念及用法 xff0c 希望对大家有所帮助 xff01 stream流模块 xff0c 是Node中非常核心的一个模块 xff0c 其它模块如f
  • 深入解析下vue3中的渲染系统

    本篇文章给大家深入解析一下vue3中的渲染系统 xff0c 希望对大家有所帮助 xff01 提到马拉松 xff0c 大家都知道马拉松是世界上最长的田径项目 xff08 全程42 195公里 xff09 xff0c 是所有体育运动中体力消耗最
  • 一文聊聊Node.js中的EventEmitter模块

    EventEmitter是 Node js 的内置模块 xff0c 为我们提供了事件订阅机制 下面本篇文章就来带大家了解一下Node js中的EventEmitter模块 xff0c 介绍一下它的用法 xff0c 希望对大家有所帮助 xff
  • 一起聊聊angular的样式隔离实现机制

    Angular是怎么进行样式隔离的 xff1f 下面本篇文章就来和大家一起聊聊angular的样式隔离实现机制 xff0c 希望对大家有所帮助 xff01 angular 以组件为基本单位 我们编写一个一个的组件 xff0c 再将这些组件组

随机推荐

  • 聊聊Node.js中如何实现Stream流(可读、可写、双工和转换流)

    本篇文章带大家了解一下Node中的之Stream xff0c 介绍一下引入 Stream xff0c 实现可读流 可写流 双工流和转换流的方法 xff0c 希望对大家有所帮助 xff01 引入 Stream 假设我们有这么一个需求 xff0
  • 带你详解vue中实现全页面或局部刷新的方法

    vue中怎么实现页面刷新 xff1f 下面本篇文章给大家介绍一下在vue中实现全页面刷新和局部刷新的方法 xff0c 希望对大家有所帮助 xff01 一 全页面刷新 1 修改 App vue xff0c 代码如下 xff1a lt temp
  • 深入浅析Angular指令如何保持关注点的分离?

    Angular指令如何保持关注点的分离 xff1f 本篇文章带大家了解一下通过 Angular 指令保持关注点分离的方法 xff0c 希望对大家有所帮助 xff01 假设在我们的应用程序中有一个日期选择器组件 用户每次更改日期的时 xff0
  • VSCode开发Python,这 14 个插件不可错过!

    VSCode怎么开发Python xff1f 下面本篇文章给大家整理分享VSCode中开发Python的14 个不可错过插件 xff0c 快来收藏 xff0c 看看有没有需要 xff01 可以说 xff0c Visual Studio Co
  • 软件测试 | 测试开发 | 使用charles 修改服务器返回数据

    使用charles 修改服务器返回数据 相信大家在做测试时 xff0c 一定有现有的返回结果不能覆盖到自己需要测试的全部场景的情况 xff0c 为了方便我们测试一些特殊情况 xff0c 我们就需要让服务器返回一些指定的内容以实现我们的测试c
  • 聊聊Vue3 style中新增了哪些特性(汇总)

    Vue3对style样式进行了升级 xff0c 下面本篇文章给大家汇总分享一下Vue3 style的新特性 xff0c 希望对大家有所帮助 xff01 Vue3 0后推出的setup函数 xff0c 像写JS一样开发Vue组件 xff0c
  • 原来利用纯CSS也能实现文字轮播与图片轮播!

    怎么制作文字轮播与图片轮播 xff1f 大家第一想到的是不是利用js xff0c 其实利用纯CSS也能实现文字轮播与图片轮播 xff0c 下面来看看实现方法 xff0c 希望对大家有所帮助 xff01 今天 xff0c 分享一个实际业务中能
  • 详解Node.js中Buffer对象的操作(创建、读写)

    本篇文章带大家了解一下Node中的Buffer对象 xff0c 介绍一下创建 Buffer 对象 读 Buffer 对象 写 Buffer 对象的方法 xff0c 希望对大家有所帮助 xff01 Buffer 是 Node js 的内置类型
  • Node.js学习之聊聊Events模块

    本篇文章带大家了解一下Node js中的Events模块 xff0c 介绍一下 Events 中的发布订阅模式 xff0c 希望对大家有所帮助 xff01 Events模块 参考官网 xff1a events 事件触发器 Node js h
  • 手把手教你安装和配置pm2,实现自动化部署node项目

    pm2怎么自动化部署nodejs项目 xff1f 下面本篇文章给大家介绍一下安装和配置pm2 xff0c 并实现自动化部署node项目的方法 xff0c 希望对大家有所帮助 xff01 1 pm2简介 pm2 xff08 process m
  • buffer是什么?深入了解Nodejs中的buffer模块

    buffer是什么 xff1f 下面本篇文章带大家深入了解一下Nodejs中的buffer模块 xff0c 介绍一下创建 复制 拼接 截取 填充Buffer xff0c 以及Buffer与String相互转换的方法 xff0c 希望对大家有
  • Angular进阶学习之深入了解路由和表单

    本篇文章是Angular的进阶学习 xff0c 我们一起来详细了解一下Angular中的路由和表单 xff0c 希望对大家有所帮助 xff01 Angular的路由介绍 在单页面应用中 xff0c 需要在定义好的不同视图中 xff08 组件
  • 浅析Vue前端路由中 hash 与 history的区别

    Vue前端路由hash与history间有什么区别 xff1f 下面本篇文章就来了解一下前端路由 hash 与 history 的差异 xff0c 希望对大家有所帮助 xff01 没了解这两种路由前 xff0c 不管是 vue还是 reac
  • 一文聊聊Angular中怎么操作DOM元素

    Angular中怎么操作DOM元素 xff1f 下面本篇文章给大家介绍一下angular操作DOM元素的方法 xff0c 希望对大家有所帮助 xff01 在angular获取DOM元素可以使用javascript的原生API xff0c 或
  • 浅析vscode中vue文件保存时怎么自动格式化

    vscode中vue文件保存时怎么自动格式化 xff1f 下面本篇文章给大家介绍一下vscode保存按照eslint规则自动格式化的方法 xff0c 希望对大家有所帮助 xff01 最近写vue用了vue admin template xf
  • 软件测试 | 测试开发 | Python 自动化测试技术面试真题

    本文为面试某公司测试开发 xff0f 自动化测试工程师时的面试题笔记 全部笔试内容没有全部写全 xff0c 只贴通用性的技术相关的笔试面试题 xff0c 至于测试理论和团队管理的问题 xff0c 都是大同小异 xff0c 也没什么实际的参考
  • VSCode中怎么配置扩展进行Arduino开发

    VSCode中怎么配置扩展进行Arduino开发 xff1f 下面本篇文章给大家介绍一下告别简陋的arduinoIDE xff0c 使用VSCode开发Arduino的方法 xff0c 希望对大家有所帮助 xff01 Arduino官方的I
  • 分享两个VSCode终端中的实用小技巧

    本篇文章给大家分享两个VSCode终端中的实用小技巧 xff0c 希望对大家有所帮助 xff01 使用VS Code终端也很有段时间了 xff0c 今天好奇发现两个小技巧 xff0c 记录一下现在激动的心情 那么这些技巧解决了什么问题呢 x
  • 聊聊Node中的各种I/O模型

    本篇文章带大家聊聊Node中的各种I O模型 xff0c 介绍一下阻塞式I O模型 非阻塞式I O模型和非阻塞异步I O xff0c 希望对大家有所帮助 xff01 我们以网络请求IO为例 xff0c 首先介绍服务端处理一次完整的网络IO请
  • Node.js深入学习之浅析require函数中怎么添加钩子

    如何为 Node 的 require 函数添加钩子 xff1f 下面本篇文章就来带大家了解一下require函数中添加钩子的方法 xff0c 希望对大家有所帮助 xff01 Node js 是一个基于 Chrome V8 引擎的 JavaS