如何通过Rollup JS API获取类似esbuild metafile的输入依赖列表
Rollup 浏览器端依赖收集方案
- Rollup 原生JS API 自带完整的全量模块依赖查询能力,完全可以实现和 esbuild
bundle.metafile.inputs对等的效果,不需要额外安装功能类插件。
你在调用rollup.rollup()拿到构建实例后,不需要等产物生成,直接遍历所有模块ID、调用实例上的getModuleInfo方法就能拿到每个模块的完整信息,参考实现如下:
拿到的// 浏览器端计算字节数的工具方法 const getByteSize = (str) => new TextEncoder().encode(str).length const bundle = await rollup({ input: 'App.jsx', plugins: [/* 你的虚拟模块、远程依赖加载插件 */] }) const inputs = {} for (const moduleId of bundle.getModuleIds()) { const moduleInfo = bundle.getModuleInfo(moduleId) // 跳过Rollup自动注入的内部辅助模块 if (moduleInfo.meta?.rollupInternal) continue inputs[moduleId] = { bytes: getByteSize(moduleInfo.code), imports: moduleInfo.importedIds.map(importedPath => { // 区分导入类型,可根据实际使用的插件补充require-call等类型判断 let kind = 'import-statement' if (moduleInfo.dynamicImports.includes(importedPath)) { kind = 'dynamic-import' } // 如果你用了CommonJS转换插件,可从moduleInfo.meta中读取require调用的标记 return { kind, path: importedPath } }) } }inputs结构和你之前用esbuild拿到的几乎完全一致,包含所有入口文件、递归依赖的第三方包、子模块的全量信息。 - 纯浏览器无文件系统场景不需要从零写适配插件,现有官方插件加少量自定义逻辑就能跑通:
- 用官方的
@rollup/plugin-virtual处理REPL里用户输入的入口文件、内存里的虚拟模块即可,不需要本地文件系统支撑 - 自己写两个极简钩子就能处理UNPKG依赖:在
resolveId钩子里把裸模块路径(比如react、react-dom/client)拼接成对应的UNPKG地址,在load钩子里判断如果是远程UNPKG路径,直接用fetch拉取代码返回即可,不需要引入依赖Node原生fs模块的@rollup/plugin-node-resolve - CommonJS格式的依赖包直接用浏览器适配版的
@rollup/plugin-commonjs就能处理,不需要额外改造
- 用官方的
- 不需要专门开发依赖收集类的插件:
如果你需要在构建流程中实时拿到依赖列表,写个10行以内的极简插件就行,在buildEnd钩子中直接调用插件上下文的this.getModuleIds()和this.getModuleInfo()方法遍历收集即可,逻辑和前面在bundle实例上收集完全一致,没有额外复杂度。
补充说明:Rollup解析得到的模块AST会直接挂载在moduleInfo.ast字段上,如果你需要更细粒度的导入信息(比如导入的具体标识符、导入语句在源码中的位置),直接遍历AST节点就能拿到,不需要额外跑一次语法解析,性能开销很低。
内容的提问来源于stack exchange,提问作者Aÿlo
相关产品推荐
相关产品推荐

