Rollup 插件机制深入学习

置顶小白6402

已于 2024-09-14 16:45:29 修改

阅读量893

点赞数 24

文章标签：学习 javascript 开发语言

于 2024-09-14 11:35:28 首次发布

本文链接：https://blog.csdn.net/nihaio25/article/details/142254087

版权

插件系统的核心

Rollup 的插件系统是其强大功能的一部分，能够让开发者通过插件定制打包过程。插件的核心包括：

Graph：Rollup 的全局图形表示，用于管理入口点及其依赖关系。
PluginDriver：插件驱动器，负责调用插件并提供插件环境上下文。

插件系统由各种钩子函数组成，这些函数在构建的不同阶段被触发，允许插件在构建过程中插入自定义逻辑。

插件的结构

一个 Rollup 插件是一个对象，包含多个属性和钩子函数。这些钩子函数分为两类：

构建钩子函数：在构建阶段执行，影响构建过程的各个方面。
输出生成钩子函数：在生成输出文件时执行，处理和修改生成的包。

插件应该作为一个包发布，并符合以下官方约定：

插件名称应以 rollup-plugin- 前缀开头。
在 package.json 中包含 rollup-plugin 关键字。
插件应提供清晰的文档和测试，使用英文编写，并尽可能提供 sourcemap 支持。

插件的安装与使用

1. 安装 Rollup

首先，确保你已经安装了 Rollup。你可以通过 npm 或 yarn 来安装：

npm install --save rollup

或

yarn add  rollup

2. 安装 Rollup 插件

Rollup 插件可以通过 npm 或 yarn 安装。例如，以下是安装一些常见插件的命令：

npm install --save-dev @rollup/plugin-node-resolve @rollup/plugin-commonjs rollup-plugin-terser

或

yarn add --dev @rollup/plugin-node-resolve @rollup/plugin-commonjs rollup-plugin-terser

3. 配置插件

在项目根目录下创建一个名为 rollup.config.js 的配置文件。在这个文件中，你可以配置和使用各种插件。以下是一个示例配置，展示了如何使用 @rollup/plugin-node-resolve、@rollup/plugin-commonjs 和 rollup-plugin-terser 插件：

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/index.js', // 入口文件
  output: {
    file: 'dist/bundle.js',
    format: 'iife', // 立即调用函数表达式（适用于浏览器）
    sourcemap: true // 启用 source maps
  },
  plugins: [
    resolve(), // 解析 node_modules 中的模块
    commonjs(), // 转换 CommonJS 模块为 ES6 模块
    terser() // 压缩代码
  ]
};

4. 运行构建

在 package.json 文件中添加构建脚本，以便通过 npm 或 yarn 执行 Rollup 构建过程：

json复制代码{
  "scripts": {
    "build": "rollup -c"
  }
}

然后，你可以使用以下命令运行构建：

npm run build

或

yarn build

插件开发最佳实践

开发 Rollup 插件时，有一些最佳实践可以帮助你创建高质量、稳定的插件。

1. 插件命名和文档

命名规范：插件名称应具有描述性，并以 rollup-plugin- 开头。
文档编写：在 package.json 中添加 rollup-plugin 关键字，并编写清晰的文档，包括安装、用法和配置示例。

2. 异步编程

异步方法：使用 async 和 await 来处理异步钩子函数，避免回调地狱。
Promise：确保插件在处理异步操作时返回 Promise 对象。

3. 提供 Sourcemap 支持

Sourcemap：如果插件涉及代码转换，确保生成正确的 sourcemap，以便于调试和错误定位。

4. 虚拟模块命名

虚拟模块：使用 \0 前缀来标识虚拟模块，这样可以避免其他插件处理这些模块。

5. 插件测试

编写测试用例：使用 Mocha 或 AVA 等测试框架编写测试用例，确保插件在各种场景下的正确性。

实际应用案例

以下是两个实际应用案例，展示如何利用 Rollup 插件系统解决实际问题。

自定义模块解析插件

以下插件用于解析自定义模块路径，并返回相应的内容：

export default function customResolvePlugin() {
  return {
    name: 'custom-resolve',
    resolveId(source) {
      if (source === 'my-custom-module') {
        return source;
      }
      return null;
    },
    load(id) {
      if (id === 'my-custom-module') {
        return 'export default "Hello from custom module!"';
      }
      return null;
    }
  };
}

代码转换和优化插件

以下插件用于在构建过程中替换代码中的 console.log 为 console.warn，并在构建结束时压缩代码：

import { terser } from 'rollup-plugin-terser';

export default function transformAndMinifyPlugin() {
  return {
    name: 'transform-and-minify',
    transform(code, id) {
      if (id.endsWith('.js')) {
        return {
          code: code.replace(/console\.log/g, 'console.warn'),
          map: null
        };
      }
      return null;
    },
    writeBundle(options, bundle) {
      console.log('Build completed and output files have been written.');
    },
    generateBundle(options, bundle) {
      this.emitFile({
        type: 'asset',
        fileName: 'additional.txt',
        source: 'Extra content in build'
      });
    },
    plugins: [
      terser() // 使用 terser 插件压缩代码
    ]
  };
}

插件机制分析

钩子函数

Rollup 的插件机制核心在于钩子函数。这些函数允许插件在构建的不同阶段执行自定义逻辑。钩子函数可以分为两类：

构建钩子函数：处理构建阶段的各种任务。
- options: 配置选项。
- resolveId: 解析模块 ID。
- load: 加载模块内容。
- transform: 转换代码。
- buildStart: 构建开始。
- buildEnd: 构建结束。
- closeBundle: 关闭构建。
输出生成钩子函数：处理输出生成阶段的任务。
- outputOptions: 输出选项。
- generateBundle: 生成包。
- writeBundle: 写入包。
- renderError: 渲染错误。

构建钩子函数的执行顺序和执行机制对于插件的功能实现至关重要。以下是常见钩子函数的详细说明及其实现方式：

1. options

options 钩子函数允许插件修改 Rollup 的配置选项。这是插件在构建过程开始时可以进行的一项设置调整。

export default function myPlugin() {
  return {
    name: 'my-plugin',
    options(options) {
      // 修改 Rollup 配置选项
      options.output.format = 'cjs';
      return options;
    }
  };
}

2. resolveId

resolveId 钩子函数用于解析模块 ID。在模块解析过程中，插件可以决定如何处理模块路径。

export default function myPlugin() {
  return {
    name: 'my-plugin',
    resolveId(source) {
      if (source === 'virtual-module') {
        return source; // 返回虚拟模块 ID
      }
      return null; // 交由其他插件处理
    }
  };
}

3. load

load 钩子函数用于加载模块的代码。当 resolveId 钩子函数返回的 ID 被请求时，load 钩子函数将会被调用。

export default function myPlugin() {
  return {
    name: 'my-plugin',
    load(id) {
      if (id === 'virtual-module') {
        return 'export default "This is virtual!"';
      }
      return null;
    }
  };
}

4. transform

transform 钩子函数用于转换模块的代码。它在代码被处理时执行，可以用于代码的转换或修改。

export default function myPlugin() {
  return {
    name: 'my-plugin',
    transform(code, id) {
      if (id.endsWith('.js')) {
        // 对所有 JavaScript 文件进行处理
        return {
          code: code.replace(/console\.log/g, 'console.warn'),
          map: null
        };
      }
      return null;
    }
  };
}

输出生成钩子函数

输出生成钩子函数用于在构建完成后处理和优化输出文件。主要包括：

generateBundle：在生成包之后触发，允许对生成的输出文件进行处理。
writeBundle：在输出文件写入磁盘之后触发，用于处理文件的最终写入。
renderError：处理构建过程中发生的错误。

1. generateBundle

generateBundle 钩子函数允许插件在生成包之后对包进行处理。这通常用于添加自定义的输出逻辑，例如生成额外的文件或注释。

export default function myPlugin() {
  return {
    name: 'my-plugin',
    generateBundle(options, bundle) {
      // 在生成的 bundle 中添加自定义文件
      this.emitFile({
        type: 'asset',
        fileName: 'extra.txt',
        source: 'This is an extra file'
      });
    }
  };
}

2. writeBundle

writeBundle 钩子函数在输出文件写入磁盘之后触发，可以用于执行额外的文件处理或日志记录操作。

export default function myPlugin() {
  return {
    name: 'my-plugin',
    writeBundle(options, bundle) {
      console.log('Bundle written to disk');
    }
  };
}

3. renderError

renderError 钩子函数用于处理构建过程中发生的错误。它可以捕捉和处理构建过程中出现的异常。

export default function myPlugin() {
  return {
    name: 'my-plugin',
    renderError(error) {
      console.error('Build error:', error);
    }
  };
}

钩子函数加载实现

Rollup 的插件系统通过 PluginDriver 类中的不同方法来加载钩子函数，确保插件能够在构建过程中插入自定义逻辑。这些方法包括：

hookFirst: 加载 first 类型的钩子函数，支持异步处理。
hookSeq: 加载 sequential 类型的钩子函数，按顺序执行。
hookParallel: 并行执行钩子函数，不等待当前钩子完成。
hookReduceArg0: 对第一个参数进行 reduce 操作。
hookReduceArg0Sync: 同步版本，处理同步钩子函数。
hookReduceValue: 对钩子函数的返回值进行 reduce 操作。
hookReduceValueSync: 同步版本，处理同步钩子函数的返回值。
hookFirstSync: first 类型的同步钩子函数加载。
hookSeqSync: sequential 类型的同步钩子函数加载。
hookParallelSync: 并行执行同步钩子函数。

`hookFirst`

hookFirst 方法用于加载 first 类型的钩子函数，这些钩子函数会按照插件列表中的顺序依次执行，直到其中一个返回非 null 或非 undefined 的结果。它支持异步处理，并确保异步操作按照顺序完成。

function hookFirst<H extends keyof PluginHooks, R = ReturnType<PluginHooks[H]>>(
  hookName: H,
  args: Args<PluginHooks[H]>,
  replaceContext?: ReplaceContext | null,
  skip?: number | null
): EnsurePromise<R> {
  let promise: Promise<any> = Promise.resolve();
  for (let i = 0; i < this.plugins.length; i++) {
    if (skip === i) continue;
    promise = promise.then((result: any) => {
      if (result != null) return result;
      return this.runHook(hookName, args as any[], i, false, replaceContext);
    });
  }
  return promise;
}

`hookFirstSync`

hookFirstSync 方法是 hookFirst 的同步版本。它按顺序执行 first 类型的同步钩子函数，并在找到非 null 或非 undefined 的结果时立即返回。

function hookFirstSync<H extends keyof PluginHooks, R = ReturnType<PluginHooks[H]>>(
  hookName: H,
  args: Args<PluginHooks[H]>,
  replaceContext?: ReplaceContext
): R {
  for (let i = 0; i < this.plugins.length; i++) {
    const result = this.runHookSync(hookName, args, i, replaceContext);
    if (result != null) return result as any;
  }
  return null as any;
}

`hookSeq`

hookSeq 方法用于加载 sequential 类型的钩子函数，这些钩子函数会按照插件列表中的顺序依次执行。无论钩子函数是否是异步的，hookSeq 方法都会等待前一个钩子函数完成后再执行下一个。

async function hookSeq<H extends keyof PluginHooks>(
  hookName: H,
  args: Args<PluginHooks[H]>,
  replaceContext?: ReplaceContext
): Promise<void> {
  let promise: Promise<void> = Promise.resolve();
  for (let i = 0; i < this.plugins.length; i++)
    promise = promise.then(() =>
      this.runHook<void>(hookName, args as any[], i, false, replaceContext),
    );
  return promise;
}

`hookSeqSync`

hookSeqSync 方法是 hookSeq 的同步版本。它按顺序执行 sequential 类型的同步钩子函数，并确保所有钩子函数都在前一个钩子函数完成后执行。

hookSeqSync<H extends SyncPluginHooks & SequentialPluginHooks>(
  hookName: H,
  args: Parameters<PluginHooks[H]>,
  replaceContext?: ReplaceContext
): void {
  for (const plugin of this.plugins) {
    this.runHookSync(hookName, args, plugin, replaceContext);
  }
}

`hookParallel`

hookParallel 方法用于并行执行 parallel 类型的钩子函数。它会同时执行所有的钩子函数，不会等待当前钩子函数的完成。

hookParallel<H extends AsyncPluginHooks & ParallelPluginHooks>(
  hookName: H,
  args: Parameters<PluginHooks[H]>,
  replaceContext?: ReplaceContext
): Promise<void> {
  const promises: Promise<void>[] = [];
  for (const plugin of this.plugins) {
    const hookPromise = this.runHook(hookName, args, plugin, false, replaceContext);
    if (!hookPromise) continue;
    promises.push(hookPromise);
  }
  return Promise.all(promises).then(() => {});
}

`hookReduceArg0`

hookReduceArg0 方法对第一个参数进行 reduce 操作。它会顺序执行钩子函数，并对第一个参数进行累积操作。

function hookReduceArg0<H extends keyof PluginHooks, V, R = ReturnType<PluginHooks[H]>>(
    hookName: H,
    [arg0, ...args]: any[],
    reduce: Reduce<V, R>,
    replaceContext?: ReplaceContext
) {
  let promise = Promise.resolve(arg0);
  for (let i = 0; i < this.plugins.length; i++) {
    promise = promise.then(arg0 => {
      const hookPromise = this.runHook(hookName, [arg0, ...args], i, false, replaceContext);
      if (!hookPromise) return arg0;
      return hookPromise.then((result: any) =>
        reduce.call(this.pluginContexts[i], arg0, result, this.plugins[i])
      );
    });
  }
  return promise;
}

`hookReduceArg0Sync`

hookReduceArg0Sync 方法是 hookReduceArg0 的同步版本，用于同步处理钩子函数的累积操作。

hookReduceArg0Sync<H extends SyncPluginHooks & SequentialPluginHooks>(
  hookName: H,
  [arg0, ...args]: any[],
  reduce: Reduce<V, R>,
  replaceContext?: ReplaceContext
): void {
  for (const plugin of this.plugins) {
    const result = this.runHookSync(hookName, [arg0, ...args], plugin, replaceContext);
    if (result != null) {
      reduce.call(this.pluginContexts[i], arg0, result, this.plugins[i]);
    }
  }
}

`runHook` 方法

runHook 方法是上述钩子函数加载方法的核心。它负责调用插件中的钩子函数，并处理函数的执行结果。runHook 方法能够处理异步操作和自定义上下文，从而提供了高度的灵活性。

function runHook<T>(
  hookName: string,
  args: any[],
  pluginIndex: number,
  permitValues: boolean,
  hookContext?: ReplaceContext | null,
): Promise<T> {
  this.previousHooks.add(hookName);
  const plugin = this.plugins[pluginIndex];
  const hook = (plugin as any)[hookName];
  if (!hook) return undefined as any;

  let context = this.pluginContexts[pluginIndex];
  if (hookContext) {
    context = hookContext(context, plugin);
  }
  return Promise.resolve()
    .then(() => {
      if (typeof hook !== 'function') {
        if (permitValues) return hook;
        return error({
          code: 'INVALID_PLUGIN_HOOK',
          message: `Error running plugin hook ${hookName} for ${plugin.name}, expected a function hook.`,
        });
      }
      return hook.apply(context, args);
    })
    .catch(err => throwPluginError(err, plugin.name, { hook: hookName }));
}

在 runHook 方法中：

查找钩子函数: 通过 pluginIndex 和 hookName 获取插件对象及其钩子函数。
处理上下文: 根据 hookContext 修改钩子函数的执行上下文。
执行钩子函数: 使用 Promise.resolve() 确保异步处理，并调用钩子函数。
错误处理: 捕获并处理钩子函数执行中的错误。

插件应用实例

以下是一些实际应用的插件实例，展示了如何利用 Rollup 插件系统来解决实际问题：

1. 自定义模块解析

创建一个插件，用于解析自定义的模块路径，并返回特定的虚拟模块内容。

export default function customResolvePlugin() {
  return {
    name: 'custom-resolve',
    resolveId(source) {
      if (source === 'my-custom-module') {
        return source;
      }
      return null;
    },
    load(id) {
      if (id === 'my-custom-module') {
        return 'export default "Hello from custom module!"';
      }
      return null;
    }
  };
}

2. 代码转换与优化

创建一个插件，用于将所有 JavaScript 代码中的 console.log 替换为 console.warn，并在构建输出时压缩代码。

import { terser } from '@rollup/plugin-terser';
export default function transformAndMinifyPlugin() {
  return {
    name: 'transform-and-minify',
    transform(code, id) {
      if (id.endsWith('.js')) {
        return {
          code: code.replace(/console\.log/g, 'console.warn'),
          map: null
        };
      }
      return null;
    },
    writeBundle(options, bundle) {
      console.log('Build completed');
    },
    generateBundle(options, bundle) {
      this.emitFile({
        type: 'asset',
        fileName: 'extra.txt',
        source: 'This is an extra file'
      });
    }
  };
}

核心依赖

yargs-parser：用于解析命令行选项。
source-map-support：这个模块通过 V8 堆栈追踪 API 支持堆栈 sourcemap 支持

最后

rollup 的源码全都糅杂在一个库中，阅读起来着实头大，模块、工具函数管理的看起来很随意。而且我们无法直接移植它的任何工具到我们的项目中，相比起来，webpack 的插件系统封装成了一个插件 tapable 就很利于我们学习和使用。

总结

Rollup 的插件和其他大型框架大同小异，都是提供统一的接口并贯彻了约定优于配置的思想。
和 webpack 相比，rollup 的插件系统自称一派且没有区分 plugin 和 loader。
Rollup 的插件系统通过钩子函数和插件机制提供了极大的灵活性，允许开发者在构建过程中插入自定义逻辑。
通过理解插件的安装、配置、使用以及开发最佳实践，开发者可以充分利用 Rollup 的插件系统满足各种构建需求。
Rollup 的钩子函数加载实现提供了多种方法来处理插件中的钩子函数，包括顺序执行、并行执行和参数累积操作等。这些方法的设计使得 Rollup 的插件系统具有高度的灵活性和扩展性。
通过 runHook 方法，插件能够在构建过程中插入自定义逻辑，并处理异步操作和上下文。

参考：
Rollup 插件机制源码解析
 rollup/plugins
rollup/awesome
tapable