如何编写一个 Rollup 插件？

推荐答案

// www.javascriptcn.com code example
import { createFilter } from '@rollup/pluginutils';

export default function myPlugin(options = {}) {
  // 使用 createFilter 创建一个过滤器，用于匹配需要处理的文件
  const filter = createFilter(options.include, options.exclude);

  return {
    name: 'my-plugin', // 插件名称

    // transform 钩子用于转换代码
    transform(code, id) {
      if (!filter(id)) return null; // 如果文件不匹配，则跳过

      // 在这里对代码进行处理
      const transformedCode = code.replace(/foo/g, 'bar');

      return {
        code: transformedCode,
        map: null // 如果你不生成 sourcemap，可以返回 null
      };
    },

    // buildStart 钩子在构建开始时触发
    buildStart() {
      console.log('Build started!');
    },

    // buildEnd 钩子在构建结束时触发
    buildEnd() {
      console.log('Build finished!');
    }
  };
}

本题详细解读

1. 插件的基本结构

Rollup 插件是一个 JavaScript 对象，它包含一些特定的钩子函数。这些钩子函数会在 Rollup 构建过程的不同阶段被调用。插件的基本结构如下：

export default function myPlugin(options = {}) {
  return {
    name: 'my-plugin', // 插件名称
    // 钩子函数
  };
}

2. 插件的钩子函数

Rollup 插件可以通过实现不同的钩子函数来扩展 Rollup 的功能。以下是一些常用的钩子函数：

• transform: 用于转换代码。它接收两个参数：code（代码内容）和 id（文件路径）。你可以在这个钩子中对代码进行处理，并返回处理后的代码和可选的 sourcemap。

• buildStart: 在构建开始时触发。你可以在这个钩子中执行一些初始化操作。

• buildEnd: 在构建结束时触发。你可以在这个钩子中执行一些清理操作。

3. 使用 createFilter 过滤文件

@rollup/pluginutils 提供了一个 createFilter 函数，用于创建文件过滤器。你可以通过 include 和 exclude 选项来指定哪些文件需要被插件处理。

const filter = createFilter(options.include, options.exclude);

4. 插件的使用

在你的 Rollup 配置文件中，你可以像这样使用插件：

// www.javascriptcn.com code example
import myPlugin from './my-plugin';

export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
  },
  plugins: [
    myPlugin({
      include: 'src/**', // 只处理 src 目录下的文件
      exclude: 'node_modules/**' // 排除 node_modules 目录
    })
  ]
};

5. 插件的扩展

你可以根据需要扩展插件的功能，例如添加更多的钩子函数，或者在 transform 钩子中实现更复杂的代码转换逻辑。Rollup 的插件系统非常灵活，允许你根据项目的需求定制构建过程。