Rollup插件投毒指南：掌握黑科技，轻松攻克代码堡垒

2023-11-20 09:00:40

深入剖析 Rollup 插件开发：在项目代码中轻松投毒

简介

Rollup 作为一款备受前端开发者推崇的打包工具，以其出色的功能性著称。除了基本的打包功能，Rollup 还支持自定义插件，赋予用户扩展其功能的强大能力。本文将带领你深入 Rollup 插件开发的世界，并探索如何利用它在项目代码中投毒。

Rollup 插件开发准备工作

踏上 Rollup 插件开发之旅的第一步是安装必要的依赖项。首先，通过以下命令安装 Rollup：

npm install rollup -g

接下来，安装 Rollup 插件开发工具包：

npm install @rollup/pluginutils -D

最后，安装代码转换工具包，以便在插件中转换代码：

npm install @babel/core -D

创建 Rollup 插件

现在，让我们开始创建 Rollup 插件。创建一个名为 plugin.js 的 JavaScript 文件，并添加以下代码：

const {rollupPluginutils} = require('@rollup/pluginutils');
const {parse} = require('@babel/core');

module.exports = function (options) {
  const filter = rollupPluginutils.createFilter(options.include, options.exclude);
  return {
    name: 'my-plugin',
    transform(code, id) {
      if (!filter(id)) {
        return null;
      }

      const ast = parse(code, {
        sourceType: 'module',
        plugins: [],
      });

      // 在此处对 AST 进行修改

      return {
        code: '',
        map: null,
      };
    },
  };
};

在 Rollup 中使用插件

在 rollup.config.js 文件中，将插件添加到 Rollup 配置中：

const myPlugin = require('./plugin.js');

module.exports = {
  input: 'src/index.js',
  output: {
    file: 'dist/index.js',
    format: 'umd',
  },
  plugins: [
    myPlugin(),
  ],
};

运行 Rollup：

rollup -c

在代码中投毒

接下来，在插件中的 transform 函数中插入以下代码，在代码中投毒：

// 在此处对 AST 进行修改

ast.program.body.push({
  type: 'ExpressionStatement',
  expression: {
    type: 'CallExpression',
    callee: {
      type: 'Identifier',
      name: 'alert',
    },
    arguments: [
      {
        type: 'Literal',
        value: 'Hello, world!',
      },
    ],
  },
});