javascript - 通过 Webpack 插件查找所有函数调用

Question

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

关于如何开始的任何指示？我应该使用哪些 Hook ？

Answer 1

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

        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 钩子(Hook)来查找函数和方法调用。这部分有点棘手，因为 Webpack 需要被愚弄，认为 CallExpression 被调用者是标识符，否则 Webpack 不会在您感兴趣的方法/函数调用上调用 Hook 。

像这样:

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