vscode中rollup打包umd库需确保三件事:npx rollup -c稳定执行、sourcemap精确映射、umd产物被node正确加载;否则调试和验证全卡住。

VSCode 里 Rollup 打包 UMD 库,关键不是装插件,而是让 rollup -c 能跑、sourceMap 能映射、output.format: 'umd' 的产物能被 Node 正确加载——这三件事错一个,调试和本地验证就全卡住。
怎么让 rollup -c 在 VSCode 终端里稳定执行
VSCode 默认终端不自动把 node_modules/.bin 加进 PATH,直接敲 rollup -c 大概率报 command not found。
- 永远用
npx rollup -c启动,它会精准定位项目本地的rollup二进制文件 - 在
package.json里加一条脚本:"build:umd": "rollup -c rollup.config.prod.js",然后用 Ctrl+Shift+P → “Tasks: Run Script” 触发,比手输更稳 - 如果用了 TypeScript,确认已安装
@rollup/plugin-typescript,且tsconfig.json中"sourceMap": true和"declaration": false都设好了(后者避免生成.d.ts干扰 UMD 输出)
为什么 UMD 输出后 Node require() 报错或找不到 exports
Rollup 输出的 UMD 文件默认带自调用包装器,Node 不认这种格式——它只认 CommonJS 或 ESM。直接 require('./dist/xxx.umd.js') 会失败,不是代码问题,是模块系统不匹配。
- 要么改用
output.format: 'cjs'(适合 Node 环境本地验证),再配output.exports: 'named'显式导出 - 要么保留
format: 'umd',但加一行output.globals声明第三方依赖映射,比如{"vue": "Vue"},否则 UMD 包里define函数找不到全局变量 - 检查
package.json的"main"字段是否指向 UMD 文件路径(如"dist/mylib.umd.js"),否则require('mylib')会 fallback 到默认入口
launch.json 怎么配才能在 src 里打断点调试 UMD 构建过程
VSCode 调试器根本不读 rollup.config.js 里的 output.sourcemap,它只认 launch.json 里写的 outFiles 和 sourceMaps。
-
"sourceMaps": true必须开,且"outFiles"要精确匹配你 UMD 输出路径,比如output.file: 'dist/mylib.umd.js',就得写成"${workspaceFolder}/dist/mylib.umd.js" -
rollup.config.js中必须设output.sourcemap: true或'inline',不能是'hidden'或false - 如果用了
output.dir+output.name动态生成文件名,outFiles就得写成"${workspaceFolder}/dist/**/*.umd.js",但要确保 Rollup 真输出了.umd.js(别被插件悄悄改成.mjs)
UMD 构建时容易漏掉的两个硬性依赖
UMD 格式本身不处理模块解析和 CommonJS 转换,这两步靠插件补全,缺一不可。
-
@rollup/plugin-node-resolve:解决import { xxx } from 'lodash'这类语句在编辑器里的红波浪线,也确保 Rollup 能找到node_modules下的真实入口 -
@rollup/plugin-commonjs:把require('fs')或module.exports = xxx这种写法转成 ES 模块,否则 UMD 包里会直接报require is not defined - 注意:这两个插件顺序不能颠倒——
node-resolve必须在commonjs前,否则 CommonJS 模块根本不会被 resolve 到
最常被忽略的是 output.format 和 outFiles 的后缀耦合:你设了 format: 'umd',但 launch.json 还在匹配 **/*.js,而 Rollup 实际输出 mylib.umd.js,断点自然失效;同理,package.json 的 "main" 如果没同步更新,本地 require() 就永远走不到新包。











