开发Rollup插件需理解其钩子机制，核心是name属性和resolveId、load、transform等钩子函数；1. resolveId解析模块路径，2. load返回源码，3. transform转换代码；示例插件将.demo文件转为导出固定字符串；通过buildStart、generateBundle等钩子可控制构建流程；调试可用console.log结合rollup-watch，发布时命名遵循rollup-plugin-xxx规范并支持ESM。
开发Rollup插件并不复杂，关键在于理解其设计模式和钩子机制。Rollup本身是一个基于ES模块的打包工具，专注于将小块代码编译成大块复杂的库或应用。插件系统是其核心扩展方式，允许你在构建过程的各个阶段介入并修改行为。
理解Rollup插件的基本结构
一个Rollup插件本质上是一个对象，至少包含一个name属性和若干钩子函数（如resolveId、load、transform等）。
最简单的插件结构如下：
export default function myPlugin() {
return {
name: 'my-plugin',
resolveId(id) {
// 控制模块id如何被解析
},
load(id) {
// 自定义文件加载内容
},
transform(code, id) {
// 对模块代码进行转换
}
};
}
每个钩子在构建流程中特定时机被调用，你可以根据需求实现一个或多个。
常用钩子及其用途
掌握几个核心钩子能应对大多数场景：
- resolveId: 决定某个导入路径对应的真实模块ID。可用于支持别名、虚拟模块或拦截特定依赖。
- load: 返回某个模块的实际源码。配合resolveId可实现动态生成模块内容。
- transform: 对每个模块的源码进行处理，比如语法转换、注入代码等，适合集成Babel、TypeScript等。
- buildStart / buildEnd: 构建开始和结束时执行，常用于初始化资源或清理工作。
- generateBundle / writeBundle: 在输出阶段操作最终产物，例如生成额外文件、压缩资源等。
动手写一个简单插件
假设我们想创建一个插件，将所有.demo文件转为返回固定字符串的模块。
export default function demoPlugin() {
return {
name: 'rollup-plugin-demo',
resolveId(id) {
if (id.endsWith('.demo')) {
return this.getResolvedId(id, null); // 标记为已解析
}
},
load(id) {
if (id.endsWith('.demo')) {
return 'export default "Hello from .demo file!"';
}
}
};
}
使用时在rollup.config.js中引入即可：
import demoPlugin from './plugins/demo-plugin';
export default {
input: 'src/index.js',
output: {
dir: 'dist',
format: 'es'
},
plugins: [demoPlugin()]
};
调试与发布插件
开发过程中可通过console.log观察钩子执行顺序和参数。推荐结合rollup-watch实时测试效果。
若希望共享插件，将其打包为npm包并遵循命名规范rollup-plugin-xxx，同时在package.json中标注"type": "module"以支持ESM。
基本上就这些。熟悉流程后，你还能开发更复杂的插件，比如内联CSS、预处理模板、分析依赖图等。关键是理解钩子的执行时机和上下文方法（如this.emitFile、this.parse等）。
