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

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

我想：

使用预编译器，比如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
                });
            };
        });
    }

----贯穿编译器---

输出：

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
                });
            };
        });
    }

---

我只是不太确定该去哪里做。我猜想，巴贝尔已经确定了所有这一切，以及埃斯林等。

< P>这并不是一个快速解决的问题，我猜想这里有很多陷阱和微妙之处，我甚至还没有开始在这里覆盖，所以非常认为这是向右的方向，而不是一个完整的解决方案。 首先，你需要阅读

然后，您将创建一个巴别塔变压器，看起来有点像这样

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捆绑之前对其进行操作

---

只需将您想要的“包装器”代码直接注入到每个函数中，可能会更容易。对于intance，如果您只想在每次运行函数名时将其console.log记录下来，此转换器将实现以下功能：

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;
}

到

---

你希望得到多少帮助？我用一个babel插件为webpack制作了一个类似的工具，所以我可以确认这是绝对可能的。几乎只是一个查找函数的正则表达式会有帮助吗？或者一系列的如果真的需要一种方法来识别它们？你对你所做的事有回购协议吗？我有，虽然它目前是私有的，但如果你有gitlab帐户，我很乐意添加你。本着SO的精神，我将给出一个关于如何使用babel来识别和更新方法的基本答案。我将试一试，这听起来正是我想要的。谢谢我接受了答案。到目前为止，这似乎是一个很有希望的解决方案，对于其他任何寻找类似东西的人来说，这是一个额外的注意事项，你基本上创建了上面的文件，然后在你的.babelrc文件中引用它，可能需要10分钟，传输的代码看起来好像已经包装好了。下一步是我想看看它是否匹配类等必须配置一些边缘情况的功能位。。。似乎生成器和类属性仍然给我带来了一些麻烦，但我只是暂时忽略它们。总的来说，如果有人正在寻找类似的解决方案，这是一个很好的起点。