通过 Webpack 插件查找所有函数调用 [英] Finding all function calls through a Webpack plugin

问题描述

我正在编写一个 Webpack 插件，它将查找对 i18n/translation 函数的所有引用，目的是查找所有需要翻译的文本，然后将它们上传到翻译服务.

I'm writing a Webpack plugin that will find all references to i18n/translation functions with the aim of finding all texts that need translations and then uploading them to a translation service.

关于如何开始的任何指示?我应该使用哪些钩子?

Any pointers on how to get started? Which hooks should I be using?

推荐答案

最终使用 compiler.hooks.compilation 获取编译对象，然后在 Webpack 解析源代码时钩入以下内容:

Ended up using compiler.hooks.compilation to get the compilation object, then the following to hook into when Webpack parses source code:

        normalModuleFactory.hooks.parser
          .for('javascript/auto')
          .tap(pluginName, parserHandler);
        normalModuleFactory.hooks.parser
          .for('javascript/dynamic')
          .tap(pluginName, parserHandler);
        normalModuleFactory.hooks.parser
          .for('javascript/esm')
          .tap(pluginName, parserHandler);

而 parserHandler 使用 parser.hooks.evaluate 钩子来查找函数和方法调用.这部分有点棘手，因为 Webpack 需要被愚弄到认为 CallExpression 被调用者是标识符，否则 Webpack 不会在您感兴趣的方法/函数调用上调用钩子.

And parserHandler uses parser.hooks.evaluate hooks to find function and method calls. This part is a bit tricky, because Webpack needs to be fooled into thinking CallExpression callee's are identifiers, otherwise Webpack won't call hooks on method/function calls you're interested in.

像这样:

           // Handler for tricking Webpack into running hooks on expressions we're interested in,
          // because it doesn't do it otherwise
          const evaluateHandler = (expr: Identifier | MemberExpression) => {
            const funcName = isMemberExpression(expr)
              ? expr.property.name
              : expr.name;
            if (isCorrectFunction(funcName)) {
              return new BasicEvaluatedExpression()
                .setRange(expr.range)
                .setExpression(expr)
                .setIdentifier(SPECIAL_IDENTIFIER);
            }
          };

          // Find all relevant function calls and mark them as identifiers to trick Webpack
          // Into invoking the `call` hooks for these CallExpressions
          parser.hooks.evaluate
            .for('MemberExpression')
            .tap(pluginName, evaluateHandler);

          // Do the same for when functions are destructured out of the parent object
          // These are actually Identifiers, but the Parser implementation doesn't mark them so for some reason
          parser.hooks.evaluate
            .for('Identifier')
            .tap(pluginName, evaluateHandler);

          // Get all relevant function call CallExpressions
          parser.hooks.call
            .for(SPECIAL_IDENTIFIER)
            .tap(
              pluginName,
              (expr: CallExpression<MemberExpression | Identifier>) => {
                // FUNCTION CALL FOUND HERE
              }
            );

这篇关于通过 Webpack 插件查找所有函数调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！