使用 webpack 或 node.js 编译器包装所有函数和方法

Posted 2023-03-29

【中文标题】使用 webpack 或 node.js 编译器包装所有函数和方法

【英文标题】：Use webpack or node.js compiler to wrap all functions and methods

【发布时间】：2019-08-25 21:55:44

【问题描述】：

这方面的技术必须可用。我只是不知道如何连接它。这不打算在生产中使用，所以我理解它对性能的影响，这主要只是我正在处理的调试的一个想法。这将适用于项目中的所有或部分文件，而不仅仅是单个文件。

我想：

使用预编译器，例如 webpack 或 grunt，我不希望它在 实际文件。 找到所有函数/方法。 （原型方法也不错） 用一个简单的函数包装这些函数。

一个简单的例子是：

输入：

const obj = 
    func: function()return 'obj.Func'
;

function B(a,b,c)
    const innerFunc = (e,f,g)=>
        return 'innerFunc'
    ;
    return

---- 通过编译器运行 ---

输出：

    const wrapper = (arguments,cb)=>
        // Spread arguments etc.
        // this is pseudo code but you get the idea
        console.log('Hey this function ran!')
        return cb(arguments[0],arguments[1],arguments[2]);
    

    const obj = 
        func: function()return wrapper(arguments,()=> return 'obj.Func')
    ;

    function B(a,b,c)
        return wrapper(arguments,(a,b,c)=>
            const innerFunc = (e,f,g)=>
                return wrapper(arguments,(e,f,g)=>
                    return 'innerFunc
                );
            ;
        );
    

我只是不太确定在哪里可以尝试这样做。我猜 Babel 已经识别出这样的一切，以及 eslint 等。

【问题讨论】：

您希望在这里获得多少帮助？我已经使用 webpack 的 babel 插件制作了一个类似的工具，所以我可以确认这绝对是可能的。

几乎只是一个查找函数的正则表达式会有帮助吗？还是一系列ifs，真的需要一种方法来识别它们？你有你所做的事情的回购吗？

我愿意，虽然它目前是私人的，但如果你有 gitlab 帐户，很高兴添加你。本着 SO 的精神，我将为如何使用 babel 识别方法并更新它们提供一个框架答案。

【参考方案1】：

这不是快速解决方案的问题，而且我怀疑有很多陷阱和微妙之处我什至还没有在这里开始介绍，所以非常认为这是朝着正确方向的推动，而不是完整的解决方案。

首先你需要阅读

https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/plugin-handbook.md

然后你将创建一个看起来有点像这样的 Babel 转换器。

module.exports = function transform(babel) 
  const t = babel.types;
  return 
    visitor: 
      FunctionDeclaration(path) 
        // you will use const t as defined above in here to
        // create your wrapper and manipulate the current method.
        // It essentially gives you access to babel types.
        // The path variable allows you get meta data about the function
        // and dive deeper into it.
      
    
  

重要的是访问者在“FunctionDeclaration”上工作 - 这是您希望更改的方法/功能块。然后，您将使用新标识符替换该函数，该标识符将包装您在问题中指定的原始方法。

这称为加载器，您需要将它与您可能正在使用的任何其他加载器一起添加到您的 webpack 配置中。它会在你的代码被 webpack 打包之前对其进行操作。

---

将您希望“包装器”代码执行的任何操作直接注入每个函数可能会更容易。例如，如果您只想在运行时控制台记录函数名称，此转换器将实现：

module.exports = function transform(babel) 
  const t = babel.types;
  return 
    visitor: 
      FunctionDeclaration(path) 
        const args = [t.stringLiteral(`$path.node.id.name called`)];
        const expression = t.callExpression(t.memberExpression(t.identifier('console'), t.identifier('log')), args);
        path.get('body').unshiftContainer('body', expression);
      
    
  

这将转换：

function bobbins(arg1, arg2) 
  return arg1 + arg2;

到

function bobbins(arg1, arg2) 
  console.log("bobbins called");
  return arg1 + arg2;

【讨论】：

我会试一试，这听起来正是我想要的。谢谢！我接受了答案。

到目前为止似乎是一个很有前途的解决方案，对于其他正在寻找类似事物的人来说，这是一个额外的注意事项，您基本上创建了上面的文件，然后在您的 .babelrc 文件中引用它***.com/questions/36368788/… 可能需要 10 分钟并且转译的代码看起来已经被包装了。下一步是我想看看它是否匹配类等。

必须针对某些极端情况稍微配置该功能...似乎生成器和类属性仍然会带来一些麻烦，但我现在只是忽略它们。总的来说，如果有人正在寻找类似的解决方案，这是一个很好的起点。