通过注释来埋点

news2024/12/25 13:54:54

目录

开始

插件编写

功能一

功能二

功能三

合并功能

运行代码

总结

这篇文章主要讲如何根据注释，通过babel插件自动地，给相应函数插入埋点代码，在实现埋点逻辑和业务逻辑分离的基础上，配置更加灵活

这篇文章想要达到的效果：
源代码：

//##箭头函数
//_tracker
const test1 = () => {};


const test1_2 = () => {};

转译之后：

import _tracker from "tracker";
//##箭头函数
//_tracker
const test1 = () => {
  _tracker();
};

const test1_2 = () => {};

代码中有两个函数，其中一个//_tracker的注释，另一个没有。转译之后只给有注释的函数添加埋点函数。
要达到这个效果就需要读取函数上面的注释，如果注释中有//_tracker，我们就给函数添加埋点。这样做避免了僵硬的给每个函数都添加埋点的情况，让埋点更加灵活。

下面让我们来看看怎么做

开始

准备babel入口文件index.js

const { transformFileSync } = require("@babel/core");
const path = require("path");
const tracker = require("./babel-plugin-tracker-comment.js");

const pathFile = path.resolve(__dirname, "./sourceCode.js");

//transform ast and generate code
const { code } = transformFileSync(pathFile, {
 plugins: [[tracker, { trackerPath: "tracker", commentsTrack: "_tracker" }]],
});

console.log(code);

这里我们使用transformFileSyncAPI转译源代码，并将转译之后的代码打印出来。过程中，将手写的插件作为参数传入plugins: [[tracker, { trackerPath: "tracker", commentsTrack: "_tracker"}]]。除此之外，还有插件的参数

  • trackerPath表示埋点函数的路径，插件在插入埋点函数之前会检查是否已经引入了该函数，如果没有引入就需要额外引入。

  • commentsTrack标识埋点，如果函数前的注释有这个，就说明函数需要埋点。判断的标识是动态传入的，这样比较灵活

入口文件准备好了，接下来准备下源代码文件sourceCode.js

import "./index.css";

//##箭头函数
//_tracker
const test1 = () => {};

const test1_2 = () => {};

//函数表达式
//_tracker
const test2 = function () {};

const test2_1 = function () {};

// 函数声明
//_tracker
function test3() {}

function test3_1() {}

这里准备了三种不同的函数类型，并且各个函数类型都有一个加了注释，另一个没加作为参照对象
就差插件了，下面写插件代码babel-plugin-tracker-comment.js

插件编写

功能一

功能实现过程中，涉及到了读取函数的注释，并且判断注释中是否有//_tracker

const leadingComments = path.get("leadingComments");
const paramCommentPath = hasTrackerComments(leadingComments, options.commentsTrack);

//函数实现
const hasTrackerComments = (leadingComments, comments) => {
 if (!leadingComments) {
  return null;
 }
 if (Array.isArray(leadingComments)) {
  const res = leadingComments.filter((item) => {
   return item.node.value.includes(comments);
  });
  return res[0] || null;
 }
 return null;
};

具体函数实现，接收函数前的注释，注释可能会有多个，所以需要一一判断。还接受埋点的标识。如果找到了含有注释标识的注释，就将这行注释返回。否则一律返回null，表示这个函数不需要埋点

那什么是多个注释？

这个很好理解，我们看下AST explorer[2]就知道了

a函数，前面有4个注释，三个行注释，一个块注释。
其对应的AST解析是这样的：


AST对象中，用leadingComments表示前面的注释，用trailingComments表示后面的注释。leadingComments中确实有4个注释，并且三个行注释，一个块注释，和代码对应上了。
函数要做的就是将其中含有//_tracker的comment path对象找出来

功能二

判断函数确实需要埋点之后，就要开始插入埋点函数了。但在这之前，还需要做一件事，就是检查埋点函数是否引入，如果没有引入就需要额外引入了

const { addDefault } = require("@babel/helper-module-imports");


if (paramCommentPath) {
  //add Import
  const programPath = path.hub.file.path;
  const importId = checkImport(programPath, options.trackerPath);
  state.importTackerId = importId;
}

//函数实现
const checkImport = (programPath, trackPath) => {
  let importTrackerId = "";
  programPath.traverse({
    ImportDeclaration(path) {
      const sourceValue = path.get("source").node.value;
      if (sourceValue === trackPath) {
        const specifiers = path.get("specifiers.0");
        importTrackerId = specifiers.get("local").toString();
        path.stop();
      }
    },
  });

  if (!importTrackerId) {
    importTrackerId = addDefault(programPath, trackPath, {
      nameHint: programPath.scope.generateUid("tracker"),
    }).name;
  }

  return importTrackerId;
};

拿到import语句需要program节点。checkImport函数的实现就是在当前文件中，找出埋点函数的引入。寻找的过程中，用到了引入插件时传入的参数trackerPath。还用到了traverseAPI，用来遍历import语句。
如果找到了引入，就获取引入的变量。这个变量在之后埋点的时候需要。即如果引入的变量命名了tracker2，那么埋点的时候埋点函数就是tracker2了
如果没有引入，就插入引入。

addDefault就是引入path的函数，并且会返回插入引用的变量。

功能三

确定好了函数需要埋点，并且确定了埋点函数引入的变量，接下来就插入函数了。

if (paramCommentPath) {
  //add Import
  const programPath = path.hub.file.path;
  const importId = checkImport(programPath, options.trackerPath);
  state.importTackerId = importId;
  
  insertTracker(path, state);
}
const insertTracker = (path, state) => {
  const bodyPath = path.get("body");
  if (bodyPath.isBlockStatement()) {
    const ast = template.statement(`${state.importTackerId}();`)();
    bodyPath.node.body.unshift(ast);
  } else {
    const ast = template.statement(`{
      ${state.importTackerId}();
              return BODY;
            }`)({ BODY: bodyPath.node });
    bodyPath.replaceWith(ast);
  }
};

在生成埋点函数的时候，就用到了之前获取到的埋点函数的变量importTackerId。还有在实际插入的时候，要区分函数体是一个Block，还是直接返回的值--()=>''

合并功能

三个功能都写好了，接下来将三个功能合起来，就是我们的插件代码了

const { declare } = require("@babel/helper-plugin-utils");
const { addDefault } = require("@babel/helper-module-imports");
const { template } = require("@babel/core");

//get comments path from leadingComments
const hasTrackerComments = (leadingComments, comments) => {
  if (!leadingComments) {
    return false;
  }
  if (Array.isArray(leadingComments)) {
    const res = leadingComments.filter((item) => {
      return item.node.value.includes(comments);
    });
    return res[0] || null;
  }
  return null;
};

//insert path
const insertTracker = (path, param, state) => {
  const bodyPath = path.get("body");
  if (bodyPath.isBlockStatement()) {
    const ast = template.statement(`${state.importTackerId}(${param});`)();
    bodyPath.node.body.unshift(ast);
  } else {
    const ast = template.statement(`{
   ${state.importTackerId}(${param});
              return BODY;
            }`)({ BODY: bodyPath.node });
    bodyPath.replaceWith(ast);
  }
};

//check if tacker func was imported
const checkImport = (programPath, trackPath) => {
  let importTrackerId = "";
  programPath.traverse({
    ImportDeclaration(path) {
      const sourceValue = path.get("source").node.value;
      if (sourceValue === trackPath) {
        const specifiers = path.get("specifiers.0");
        importTrackerId = specifiers.get("local").toString();
        path.stop();
      }
    },
  });

  if (!importTrackerId) {
    importTrackerId = addDefault(programPath, trackPath, {
      nameHint: programPath.scope.generateUid("tracker"),
    }).name;
  }

  return importTrackerId;
};

module.exports = declare((api, options) => {
  console.log("babel-plugin-tracker-comment");
  return {
    visitor: {
      "ArrowFunctionExpression|FunctionDeclaration|FunctionExpression": {
        enter(path, state) {
          let nodeComments = path;
          if (path.isExpression()) {
            nodeComments = path.parentPath.parentPath;
          }
          // 获取leadingComments
          const leadingComments = nodeComments.get("leadingComments");
          const paramCommentPath = hasTrackerComments(leadingComments,options.commentsTrack);

          //查看作用域中是否有——trackerParam

          // 如果有注释，就插入函数
          if (paramCommentPath) {
            //add Import
            const programPath = path.hub.file.path;
            const importId = checkImport(programPath, options.trackerPath);
            state.importTackerId = importId;

            insertTracker(path, state);
          }
        },
      },
    },
  };
});

在获取注释的时候，代码中并不是直接获取到path的leadingComments，这是为什么？
比如这串代码：

//_tracker
const test1 = () => {};

我们在函数中遍历得到的path是()=>{}ast的path，这个path的leadingComments其实是null，而想要获取//_tracker，我们真正需要拿到的path，是注释下面的变量声明语句。所以在代码中有判断是否为表达式，如果是，那就需要先parentPath，得到赋值表达式的path，然后在parentPath，才能拿到变量声明语句

运行代码

node index.js

得到输出：

总结

这篇文章写了如何根据函数上方的注释，选择性的给函数埋点。过程详尽，例子通俗易懂，真是不可多得的一篇好文章啊
有任何问题，欢迎金友们留言评论哦～

相关文章：

  1. 通过工具babel，给函数都添加埋点[4]

  2. 通过工具babel，给埋点函数传递参数[5]

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1214523.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

idea查看UML类图

idea查看UML类图

idea查看UML类图 一、如何查看UML类图 1.1 选择需要查看的类或者包，鼠标右键，选择Diagrams->Show Diagram 1.2 对于UML类图中的包，选中后点击鼠标右键-> Expand Nodes(展开节点) 展开前 展开后 1.3 展开后分布比较凌乱&#xff…
阅读更多...
inner join left join 什么情况效果相同

inner join left join 什么情况效果相同

效果不同的情况 SELECT g.name AS groupName, g.root_code AS rootCode, g.data_sort AS groupDataSort, l.* FROM wise_system_point_group g LEFT JOIN wise_system_point_list l ON g.code l.group_code WHERE g.code "drug" ORDER BY g.data_sort, l.data_s…
阅读更多...
DBA_IND_STATISTICS 字段含义

DBA_IND_STATISTICS 字段含义

功能 展示数据库中所有索引的优化器统计信息。 字段说明 参考：https://www.oceanbase.com/docs/enterprise-oceanbase-database-cn-10000000000885743
阅读更多...
骨传导式蓝牙耳机值得入手吗？盘点最值得入手的5款骨传导耳机

骨传导式蓝牙耳机值得入手吗？盘点最值得入手的5款骨传导耳机

在骨传导耳机还没有火之前，相信很多朋友都是使用入耳式和头戴式耳机比较多一点，但是慢慢的会发现，这两种耳机都存在很大的问题，比如说入耳式耳机，长时间佩戴会造成耳朵痛等问题，而头戴式耳机因为隔音效果好…
阅读更多...
一文解释对比学习

一文解释对比学习

对比学习是一种无监督学习技术，其核心思想是通过比较不同样本之间的相似性和差异性来学习数据的表示（features）。它不依赖于标签数据，而是通过样本之间的相互关系，使得模型能够学习到有意义的特征表示。 在对比学习中…
阅读更多...
金融行业备份容灾：如何满足严格行业标准同时实现成本效益优化？

金融行业备份容灾：如何满足严格行业标准同时实现成本效益优化？

北京时间11月9日，中国工商银行股份有限公司在美全资子公司——工银金融服务有限责任公司（ICBCFS）遭受勒索软件攻击，导致部分业务系统中断，造成部分市场的重大损失。中国工商银行的这次网络攻击事件也再次凸显了金融系统…
阅读更多...
[Mac软件]Adobe XD(Experience Design) v57.1.12.2一个功能强大的原型设计软件

[Mac软件]Adobe XD(Experience Design) v57.1.12.2一个功能强大的原型设计软件

Adobe XD是一个直观、强大的UI/UX开发工具，旨在设计、原型设计、用户之间共享材料，以及通过数字技术设计交互。Adobe XD为您提供开发网站、应用程序、语音界面、游戏界面、电子邮件模板等所需的一切。 无限制地创建 设计各种互动，创建看起来…
阅读更多...
一起学docker系列之三docker的详细安装步骤

一起学docker系列之三docker的详细安装步骤

目录 前言1. 准备环境2. 卸载已有的Docker3. 安装编译工具4. 安装必需的软件5. 配置镜像仓库6. 更新YUM软件包索引7. 安装Docker CE8. 启动Docker9. 测试Docker10. 卸载Docker结语 前言 安装Docker是一项重要的任务，因为它为应用程序提供了容器化的环境&#xff0c…
阅读更多...
SAP 比较两个内表记录的差异及取元素域值

SAP 比较两个内表记录的差异及取元素域值

一、比较两个内表记录的差异，可以使用FM：CTVB_COMPARE_TABLES来比较两个内表间的差异，有那些纪录是新增的，那些是修改过的和那些是被删除的。 CALL FUNCTION CTVB_COMPARE_TABLESEXPORTINGtable_old old_tab[]table_new new_t…
阅读更多...
【寒武纪（9）】MLU架构

【寒武纪（9）】MLU架构

⼀个MLU 设备由 Memory ⼦系统、MTP（Multi Tensor Processor）⼦系统、Media ⼦系统等构成。MTP⼦系统是寒武纪MLU 架构的核⼼。 文章目录 TP1 架构TP2 架构TP3 1⾯向不同 MLU 架构的 Cambricon BANG 编程最佳实践1.1 Device 级异构调优指南1.2 Cluster …
阅读更多...
【VSCode】Visual Studio Code 下载与安装教程

【VSCode】Visual Studio Code 下载与安装教程

前言 Visual Studio Code（简称 VS Code）是一个轻量级的代码编辑器，适用于多种编程语言和开发环境。本文将介绍如何下载和安装 Visual Studio Code。 下载安装包 首先，我们需要从官方网站下载 Visual Studio Code 的安装包。请访…
阅读更多...
d3dx9_39.dll丢失怎么修复？d3dx9_39.dll丢失的四种修复办法分享

d3dx9_39.dll丢失怎么修复？d3dx9_39.dll丢失的四种修复办法分享

d3dx9_39.dll是DirectX库中的一个重要组件，属于Microsoft Direct3D 9 API。它提供了许多用于创建和渲染3D图形的函数。DirectX是一套开发多媒体应用程序的API，广泛应用于游戏、视频和图形处理等领域。d3dx9_39.dll文件主要负责处理3D图形渲染、动画、光源…
阅读更多...
[C/C++]数据结构 链表OJ题:随机链表的复制

[C/C++]数据结构 链表OJ题:随机链表的复制

题目描述: 给你一个长度为 n 的链表，每个节点包含一个额外增加的随机指针 random ，该指针可以指向链表中的任何节点或空节点。 构造这个链表的 深拷贝。 深拷贝应该正好由 n 个 全新 节点组成，其中每个新节点的值都设为其对应的原节点的值。新…
阅读更多...
Python武器库开发-flask篇之URL重定向(二十三)

Python武器库开发-flask篇之URL重定向(二十三)

flask篇之URL重定向(二十三) 通过url_for()函数构造动态的URL： 我们在flask之中不仅仅是可以匹配静态的URL，还可以通过url_for()这个函数构造动态的URL from flask import Flask from flask import url_forapp Flask(__name__)app.route(/) def inde…
阅读更多...
B031-网络编程 Socket Http TomCat

B031-网络编程 Socket Http TomCat

目录 计算机网络网络编程相关术语IP地址ip的概念InerAdress的了解与测试 端口URLTCP、UDP和7层架构TCPUDPTCP与UDP的区别和联系TCP的3次握手七层架构 Socket编程服务端代码客户端代码 http协议概念Http报文 Tomcat模拟 计算机网络 见文档 网络编程相关术语 见文档 IP地址 …
阅读更多...
Python--快速入门四

Python--快速入门四

Python--快速入门四 1.Python函数 1.在括号中放入函数的参数。 2.可以通过return在函数作用域外获取函数作用域内的值。(默认的return值为None) 代码展示：BMI计算函数 def calculate_BMI(fuc_height,fuc_weight):fuc_BMI fuc_weight/(fuc_height**2)return fuc…
阅读更多...
转载：YOLOv8改进全新Inner-IoU损失函数：扩展到其他SIoU、CIoU等主流损失函数，带辅助边界框的损失

转载：YOLOv8改进全新Inner-IoU损失函数：扩展到其他SIoU、CIoU等主流损失函数，带辅助边界框的损失

0、摘要 随着检测器的快速发展，边界框回归（BBR）损失函数不断进行更新和优化。然而，现有的 IoU 基于 BBR 仍然集中在通过添加新损失项来加速收敛，忽略了 IoU 损失项本身的局限性。尽管从理论上讲，IoU 损失可…
阅读更多...
Linux-查询目录下包含的目录数或文件数

Linux-查询目录下包含的目录数或文件数

1. 前置 1）ls Linux最常用的命令之一，列出该目录下的包含内容。 -l：use a long listing format-以列表的形式展现 -R：list subdirectories recursively-递归列出子目录 2）| 管道符 将上一条命令的输出&#xff…
阅读更多...
BUUCTF 被劫持的神秘礼物 1

BUUCTF 被劫持的神秘礼物 1

BUUCTF:https://buuoj.cn/challenges 题目描述： 某天小明收到了一件很特别的礼物，有奇怪的后缀，奇怪的名字和格式。小明找到了知心姐姐度娘，度娘好像知道这是啥，但是度娘也不知道里面是啥。。。你帮帮小明&#xff1…
阅读更多...
网络类型及数据链路层的协议

网络类型及数据链路层的协议

网络类型 --- 根据数据链路层使用的协议来进行划分的。 MA网络 --- 多点接入网络 BMA --- 广播型多点接入网络---以太网协议 NBMA --- 非广播型多点接入网络 以太网协议 --- 需要使用mac地址对不同的主机设备进行区分和标识 --- 以太网之所以需要使用mac地址进行数据寻址&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023