无需登录 数据私有 本地保存

Rollup 插件开发沙盒 - 编写并测试插件效果

开发工具 编译工具 Rollup 插件 沙盒 测试
9
0
0
0
就绪
插件代码 (Plugin) JavaScript
源代码 (Source) entry.js
构建输出 (Output) ES Module
点击「运行构建」查看插件效果
⏱ 耗时: -- 📦 输出大小: -- 📝 行数变化: -- 🔌 插件Hook: --
正在加载 Rollup 运行时...

Rollup 插件开发常见问题

什么是 Rollup 插件？它的核心机制是什么？
Rollup 插件是一个对象，包含一个或多个 Hook 函数。这些 Hook 在构建流程的不同阶段被调用，让开发者能够介入模块解析、代码转换、资源加载等环节。核心 Hook 包括：resolveId（模块路径解析）、load（加载模块内容）、transform（代码转换，最常用）、buildStart、buildEnd、generateBundle 等。插件通过返回特定的值或调用 this 上下文方法来影响构建结果。
Transform Hook 如何使用？它接收哪些参数？
transform(code, id) 是使用最频繁的 Hook。
• code：模块的源代码字符串
• id：模块的文件路径（如 /src/utils.js）
返回值可以是：① 包含 code 和可选的 map（sourcemap）的对象；② 仅返回转换后的字符串；③ null/undefined 表示不进行转换。如果返回的 code 与原代码相同，Rollup 会跳过该模块的后续处理以优化性能。异步处理可返回 Promise。
Rollup 插件与 Webpack Loader/Plugin 有何区别？
Rollup 插件采用统一的 Hook 模型，一个插件可以同时处理解析、加载、转换、输出生成等多个阶段。而 Webpack 将 Loader（负责文件转换）和 Plugin（负责构建流程介入）分开。Rollup 的设计更简洁，插件可以访问 this.parse() 获取 AST、this.resolve() 解析模块路径、this.warn() 和 this.error() 进行诊断。这使得 Rollup 插件在代码转换场景（如 Babel、Terser）和资源处理场景（如处理 JSON、CSS）中都能胜任。
如何在插件中使用 this.parse() 获取 AST？
在 transform Hook 中，可以通过 this.parse(code, options) 将源代码解析为 ESTree 兼容的 AST。这依赖 Rollup 内置的 Acorn 解析器。获取 AST 后，可以使用工具如 estree-walker（Rollup 内置提供）遍历和修改 AST 节点，实现更精确的代码转换——比如替换特定函数调用、注入代码片段、分析依赖关系等。修改后的 AST 需要通过代码生成器转回字符串，通常配合 magic-string 库使用以避免破坏原始代码结构。
如何调试 Rollup 插件？有哪些实用技巧？
调试技巧：
① 使用本沙盒快速迭代测试插件逻辑，无需本地搭建环境
② 在插件中调用 this.warn() 输出调试信息到构建日志
③ 使用 console.log 在 Node.js 环境中查看中间状态
④ 为插件添加 name 属性便于在日志中识别
⑤ 使用 Rollup 的 --watch 模式实时观察变更效果
⑥ 编写单元测试，使用 rollup.rollup() API 进行自动化测试
⑦ 检查生成的 sourcemap 以验证代码转换位置是否正确
resolveId 和 load Hook 有什么区别？何时使用？
resolveId(source, importer) 负责模块路径解析——将 import 语句中的说明符（如 'lodash' 或 './utils'）解析为绝对路径或虚拟 ID。可以返回 false 表示该模块应被视为外部依赖。
load(id) 负责加载模块内容——根据解析后的 ID 返回源代码字符串。适合处理虚拟模块（内存中的文件）、从网络加载资源、或对特定文件类型进行预处理。
两者常配合使用：resolveId 识别特殊路径前缀（如 virtual:），load 返回对应的虚拟内容。这是实现虚拟文件系统的标准模式。
这个在线沙盒如何工作？有什么限制？
本沙盒在浏览器中运行完整的 Rollup 运行时（通过 CDN 加载 rollup.browser.js）。它创建一个虚拟文件系统，将您输入的源代码映射为虚拟模块 entry.js，然后应用您编写的插件进行构建。构建结果通过 bundle.generate() 生成并展示。
限制：浏览器环境不支持 bundle.write()（需要 Node.js 文件系统）；部分依赖 Node.js 内置模块的插件无法运行；大型构建可能受浏览器内存限制。对于大多数 transform 类插件的测试，本沙盒完全够用。
🔧 相关工具