编写Babel插件：如何在visitor钩子执行后修改代码？

直接修改state.code的方式不符合Babel的AST处理流程，所以无法生效。你可以通过操作AST节点的方式，在编译过程中向代码头部插入变量声明，单个插件就能完成这个需求。

修改后的插件代码 #

export default function({ types: t }) {
  return {
    pre(state) {
      this.allString = '';
    },
    visitor: {
      StringLiteral(path) {
        this.allString += path.node.value;
      },
      Program: {
        exit(path) {
          // 创建`const allString = 'xxx'`的AST节点
          const allStringDeclaration = t.variableDeclaration('const', [
            t.variableDeclarator(
              t.identifier('allString'),
              t.stringLiteral(this.allString)
            )
          ]);
          // 将节点插入到程序代码的最开头
          path.unshiftContainer('body', allStringDeclaration);
        }
      }
    }
  };
}

关键说明 #

• AST操作而非直接拼接代码：Babel的核心是基于抽象语法树（AST）处理代码，通过@babel/types提供的方法创建合法的AST节点，能避免直接拼接代码带来的语法错误（比如字符串中的引号转义问题）。
• Program节点的exit钩子：在Program节点的退出阶段插入变量声明，此时所有字符串已经收集完成，且不会干扰其他节点的遍历处理。
• 自动转义处理：t.stringLiteral会自动处理字符串中的特殊字符（如单引号、换行符），确保生成的代码语法合法。

内容的提问来源于stack exchange，提问作者HZ1