## 插件系统的核心 Rollup 的插件系统是其强大功能的一部分，能够让开发者通过插件定制打包过程。插件的核心包括： - **Graph**：Rollup 的全局图形表示，用于管理入口点及其依赖关系。 - **PluginDriver**：插件驱动器，负责调用插件并提供插件环境上下文。插件系统由各种钩子函数组成，这些函数在构建的不同阶段被触发，允许插件在构建过程中插入自定义逻辑。 ## 插件的结构一个 Rollup 插件是一个对象，包含多个属性和钩子函数。这些钩子函数分为两类： 1. **构建钩子函数**：在构建阶段执行，影响构建过程的各个方面。 2. **输出生成钩子函数**：在生成输出文件时执行，处理和修改生成的包。插件应该作为一个包发布，并符合以下官方约定： - 插件名称应以 `rollup-plugin-` 前缀开头。 - 在 `package.json` 中包含 `rollup-plugin` 关键字。 - 插件应提供清晰的文档和测试，使用英文编写，并尽可能提供 sourcemap 支持。 ## 插件的安装与使用 ### 1. 安装 Rollup 首先，确保你已经安装了 Rollup。你可以通过 npm 或 yarn 来安装： ```bash npm install --save rollup ``` 或 ```bash yarn add rollup ``` ### 2. 安装 Rollup 插件 Rollup 插件可以通过 npm 或 yarn 安装。例如，以下是安装一些常见插件的命令： ```bash npm install --save-dev @rollup/plugin-node-resolve @rollup/plugin-commonjs rollup-plugin-terser ``` 或 ```bash 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` 插件： ```bash 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 构建过程： ```js json复制代码{ "scripts": { "build": "rollup -c" } } ``` 然后，你可以使用以下命令运行构建： ```bash npm run build ``` 或 ```bash 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 插件系统解决实际问题。 ### 自定义模块解析插件以下插件用于解析自定义模块路径，并返回相应的内容： ```js 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`，并在构建结束时压缩代码： ```js 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 的插件机制核心在于钩子函数。这些函数允许插件在构建的不同阶段执行自定义逻辑。钩子函数可以分为两类： 1. **构建钩子函数**：处理构建阶段的各种任务。 - `options`: 配置选项。 - `resolveId`: 解析模块 ID。 - `load`: 加载模块内容。 - `transform`: 转换代码。 - `buildStart`: 构建开始。 - `buildEnd`: 构建结束。 - `closeBundle`: 关闭构建。 2. **输出生成钩子函数**：处理输出生成阶段的任务。 - `outputOptions`: 输出选项。 - `generateBundle`: 生成包。 - `writeBundle`: 写入包。 - `renderError`: 渲染错误。构建钩子函数的执行顺序和执行机制对于插件的功能实现至关重要。以下是常见钩子函数的详细说明及其实现方式： ##### 1. **options** `options` 钩子函数允许插件修改 Rollup 的配置选项。这是插件在构建过程开始时可以进行的一项设置调整。 ```js export default function myPlugin() { return { name: 'my-plugin', options(options) { // 修改 Rollup 配置选项 options.output.format = 'cjs'; return options; } }; } ``` ##### 2. **resolveId** `resolveId` 钩子函数用于解析模块 ID。在模块解析过程中，插件可以决定如何处理模块路径。 ```js 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` 钩子函数将会被调用。 ```js 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` 钩子函数用于转换模块的代码。它在代码被处理时执行，可以用于代码的转换或修改。 ```js 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` 钩子函数允许插件在生成包之后对包进行处理。这通常用于添加自定义的输出逻辑，例如生成额外的文件或注释。 ```js 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` 钩子函数在输出文件写入磁盘之后触发，可以用于执行额外的文件处理或日志记录操作。 ```js export default function myPlugin() { return { name: 'my-plugin', writeBundle(options, bundle) { console.log('Bundle written to disk'); } }; } ``` ##### 3. **renderError** `renderError` 钩子函数用于处理构建过程中发生的错误。它可以捕捉和处理构建过程中出现的异常。 ```js 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` 的结果。它支持异步处理，并确保异步操作按照顺序完成。 ```tsx function hookFirst>( hookName: H, args: Args, replaceContext?: ReplaceContext | null, skip?: number | null ): EnsurePromise { let promise: Promise = 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` 的结果时立即返回。 ```tsx function hookFirstSync>( hookName: H, args: Args, 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` 方法都会等待前一个钩子函数完成后再执行下一个。 ```tsx async function hookSeq( hookName: H, args: Args, replaceContext?: ReplaceContext ): Promise { let promise: Promise = Promise.resolve(); for (let i = 0; i < this.plugins.length; i++) promise = promise.then(() => this.runHook(hookName, args as any[], i, false, replaceContext), ); return promise; } ``` #### `hookSeqSync` `hookSeqSync` 方法是 `hookSeq` 的同步版本。它按顺序执行 `sequential` 类型的同步钩子函数，并确保所有钩子函数都在前一个钩子函数完成后执行。 ```tsx hookSeqSync( hookName: H, args: Parameters, replaceContext?: ReplaceContext ): void { for (const plugin of this.plugins) { this.runHookSync(hookName, args, plugin, replaceContext); } } ``` #### `hookParallel` `hookParallel` 方法用于并行执行 `parallel` 类型的钩子函数。它会同时执行所有的钩子函数，不会等待当前钩子函数的完成。 ```tsx hookParallel( hookName: H, args: Parameters, replaceContext?: ReplaceContext ): Promise { const promises: Promise[] = []; 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` 操作。它会顺序执行钩子函数，并对第一个参数进行累积操作。 ```tsx function hookReduceArg0>( hookName: H, [arg0, ...args]: any[], reduce: Reduce, 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` 的同步版本，用于同步处理钩子函数的累积操作。 ```tsx hookReduceArg0Sync( hookName: H, [arg0, ...args]: any[], reduce: Reduce, 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` 方法能够处理异步操作和自定义上下文，从而提供了高度的灵活性。 ```tsx function runHook( hookName: string, args: any[], pluginIndex: number, permitValues: boolean, hookContext?: ReplaceContext | null, ): Promise { 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` 方法中： 1. **查找钩子函数**: 通过 `pluginIndex` 和 `hookName` 获取插件对象及其钩子函数。 2. **处理上下文**: 根据 `hookContext` 修改钩子函数的执行上下文。 3. **执行钩子函数**: 使用 `Promise.resolve()` 确保异步处理，并调用钩子函数。 4. **错误处理**: 捕获并处理钩子函数执行中的错误。 ### 插件应用实例以下是一些实际应用的插件实例，展示了如何利用 Rollup 插件系统来解决实际问题： #### 1. **自定义模块解析** 创建一个插件，用于解析自定义的模块路径，并返回特定的虚拟模块内容。 ```js 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`，并在构建输出时压缩代码。 ```js 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](https://github.com/webpack/tapable) 就很利于我们学习和使用。 ## 总结 Rollup 的插件和其他大型框架大同小异，都是提供统一的接口并贯彻了约定优于配置的思想。和 webpack 相比，rollup 的插件系统自称一派且没有区分 plugin 和 loader。 Rollup 的插件系统通过钩子函数和插件机制提供了极大的灵活性，允许开发者在构建过程中插入自定义逻辑。通过理解插件的安装、配置、使用以及开发最佳实践，开发者可以充分利用 Rollup 的插件系统满足各种构建需求。 Rollup 的钩子函数加载实现提供了多种方法来处理插件中的钩子函数，包括顺序执行、并行执行和参数累积操作等。这些方法的设计使得 Rollup 的插件系统具有高度的灵活性和扩展性。通过 `runHook` 方法，插件能够在构建过程中插入自定义逻辑，并处理异步操作和上下文。参考： 1.[Rollup 插件机制源码解析](https://youngjuning.js.org/1470e2efc9e9/) 2.[rollup/plugins](https://github.com/rollup/plugins) 3.[rollup/awesome](https://github.com/rollup/awesome) 4.[tapable](https://github.com/webpack/tapable)