在上一篇文章中讲到了，如何使用 Rollup 打包生成多个不同模块的包，那么接下来这篇文章我们将学习到如何自定义一个 plugin 在项目代码中投毒。

我只是写来玩的哈，你们可千万别在项目中使用，别等等被律师函警告了哈哈哈哈哈哈哈！！！

在上一篇代码的基础上，我们还需要额外安装几个依赖包终端输入以下命令：

bash 复制代码

pnpm add @babel/core @babel/plugin-transform-typescript @babel/traverse @babel/types rollup-plugin-babel

首先我们要在跟目录下创建一个 moment.js 的文件，并编写一下代码：

js 复制代码

import babel from "@babel/core";
import traverse from "@babel/traverse";
import t from "@babel/types";

export default function modifyTsReturnPlugin() {
  return {
    name: "modify-ts-return-plugin",
    transform(code, id) {
      // 仅处理 TypeScript 文件
      if (id.endsWith(".ts")) {
        const result = babel.transformSync(code, {
          ast: true,
          plugins: ["@babel/plugin-transform-typescript"],
        });

        traverse.default(result.ast, {
          FunctionDeclaration(path) {
            path.node.body = t.blockStatement([
              t.returnStatement(t.stringLiteral("sing dance rap music")),
            ]);
          },
          ArrowFunctionExpression(path) {
            path.node.body = t.blockStatement([
              t.returnStatement(t.stringLiteral("sing dance rap music")),
            ]);
          },
        });

        return {
          code: babel.transformFromAstSync(result.ast).code,
          map: null,
        };
      }
    },
  };
}

在上面的这些代码中，首先我们先来了解一下这三个包都分别代表什么：

@babel/core：主要用于将 ECMAScript 2015+ 代码转换为向后兼容的 JavaScript 版本，以便在当前和旧版浏览器或环境中运行。这个过程通常被称为转译。
@babel/traverse：用于遍历和更新 JavaScript 抽象语法树（AST）。在编程语言中，AST 是源代码的树状结构表示，它以嵌套的方式表示语法结构和元素。@babel/traverse 提供了遍历这个结构的方法，并且允许在遍历过程中修改树。
@babel/types：是 Babel 编译器的一个包，专门用于创建、操作和验证 AST（抽象语法树）节点。AST 是编程语言源代码的树状结构表示，它详细描述了代码的语法结构。在 JavaScript 的转译、代码分析或代码生成过程中，AST 起着至关重要的作用。

这段代码定义了一个 Babel 插件，其主要功能是自动修改 TypeScript 文件中的所有函数声明和箭头函数表达式，使它们的函数体统一返回固定字符串 "sing dance rap music"。插件首先将代码转换为抽象语法树（AST），然后遍历这个 AST，对指定类型的节点进行修改，最后将修改后的 AST 转换回 JavaScript 代码。这个插件特别针对 TypeScript 文件，并且在其处理流程中不生成 source maps。

当编写完代码之后，我们要在项目中引入导入给函数，具体代码如下所示：

js 复制代码

// rollup.config.js

import typescript from "@rollup/plugin-typescript";
import momentTsReturnPlugin from "./moment.js";

export default {
  input: "src/index.ts", // 你的主入口文件
  output: [
    {
      file: "dist/bundle.esm.js",
      format: "esm",
    },
  ],
  plugins: [typescript(), momentTsReturnPlugin()],
  external: [],
};

我们在这里，直接引入并且在 plugins 中调用即可。

最终，我们的代码和文件目录如下图所示：

最终的代码输出如下图所示：

查看 dist 目录，发现投毒成功哈哈哈。

总结

本文通过自定义 plugin 和 babel 的结合，去通过操作 ast 树的方式，实现对源代码进行转换，在实际开发中，可以根据自己的需求去做到一些代码转换，或者可以做一些埋点上报都是可以的。

如何在Rollup的plugin中投毒🐂🐂🐂

总结