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

Question

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

我想：

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

一个简单的例子是：

输入：

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 等

Answer 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' 上工作 - 即您要更改的 method/function 块。然后，您将用一个新标识符替换该函数，该标识符将按照您在问题中指定的方式包装原始方法。

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

将您希望 'wrapper' 代码执行的任何操作直接注入到每个函数中可能会更容易。例如，如果您只想 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;
}

到

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

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

Use webpack or node.js compiler to wrap all functions and methods

javascript

precompile

gruntjs

webpack

babeljs