React Native项目中Metro Bundler函数代码注入问题求助

一、编写自定义Babel插件 #

创建./babel-plugins/track-function-call.js，这个插件会遍历代码AST，自动识别各类函数并注入追踪代码，同时只处理/src目录下的文件：

module.exports = function ({ types: t }) {
  return {
    visitor: {
      FunctionDeclaration(path) {
        injectTrackingCode(path, t);
      },
      FunctionExpression(path) {
        injectTrackingCode(path, t);
      },
      ArrowFunctionExpression(path) {
        injectTrackingCode(path, t);
      },
    },
  };
};

function injectTrackingCode(path, t) {
  // 只处理/src目录下的文件
  const filename = path.hub.file.opts.filename;
  if (!filename.includes('/src/')) return;

  // 自动识别函数名，匿名函数标记为anonymous
  let functionName = 'anonymous';
  if (path.node.id) {
    functionName = path.node.id.name;
  } else if (path.parentPath.isVariableDeclarator()) {
    functionName = path.parentPath.node.id.name;
  } else if (path.parentPath.isAssignmentExpression()) {
    functionName = path.parentPath.node.left.name || 'anonymous';
  }

  // 构建要注入的trackCall调用节点
  const callExpr = t.callExpression(
    t.identifier('trackCall'),
    [
      t.objectExpression([
        t.objectProperty(
          t.identifier('functionName'),
          t.stringLiteral(functionName)
        )
      ])
    ]
  );

  // 向函数体开头插入代码
  const body = path.node.body;
  if (t.isBlockStatement(body)) {
    body.body.unshift(t.expressionStatement(callExpr));
  } else {
    // 处理无块级作用域的箭头函数
    path.node.body = t.blockStatement([
      t.expressionStatement(callExpr),
      t.returnStatement(body)
    ]);
  }
}

二、配置Babel与Metro #

1. 修改babel.config.js，引入自定义插件：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    './babel-plugins/track-function-call.js'
  ],
};

2. 保持metro.config.js默认配置即可，无需额外修改babelTransformerPath：

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

const config = {};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

三、定义全局trackCall函数 #

在项目入口文件（如src/index.tsx）中定义全局可用的追踪函数：

// 全局函数调用追踪逻辑
global.trackCall = ({ functionName }: { functionName: string }) => {
  console.count(`函数调用：${functionName}`);
  // 可替换为你的埋点、统计逻辑
};

四、验证效果 #

启动项目后，调用/src目录下的任意函数，控制台会打印对应的调用计数，说明代码注入生效。

关于之前自定义Transformer失效的原因 #

直接修改babelTransformerPath容易破坏Metro默认的转译流程（比如TS转JS、语法降级等），导致注入的代码未被正确编译到最终产物中。用Babel插件的方式是在官方默认转译流程中插入逻辑，兼容性和可靠性更高。

额外优化点 #

• 可在插件中添加排除规则，比如跳过以下划线开头的私有函数：if (functionName.startsWith('_')) return;
• 对于类方法，可新增ClassMethod节点的处理逻辑，覆盖组件类的方法注入。

内容的提问来源于stack exchange，提问作者Siddhartha Chowdhury