
WebStorm里怎么让Rollup命令跑起来
直接在 WebStorm 的 Terminal 里敲 rollup -c 能跑,但想点按钮一键构建、自动监听、带断点调试——得配好运行配置。默认不配,WebStorm 不知道你用的是 rollup 还是 rollup.config.js,更不会识别 input 和 output 路径。
- 先确认本地已安装
rollup(推荐--save-dev方式),不是全局装的——WebStorm 默认读项目内node_modules/.bin/rollup - 打开 Run → Edit Configurations…,点
+→ 选Node.js -
Working directory填项目根路径(比如$ProjectFileDir$) -
JavaScript file填node_modules/rollup/dist/bin/rollup(别手输,用文件选择器找,避免路径错) -
Application parameters填-c rollup.config.js;如果 config 文件名不同(如rollup.prod.js),这里必须显式写全 - 勾选
Allow parallel run,方便同时开 dev/watch 和 build 两个配置
为什么改了代码没热更新,或者 watch 模式卡住
Rollup 自身不提供浏览器刷新或 HMR,rollup -cw 只是监听文件变化并重打包,WebStorm 不会自动把新 bundle 推给浏览器——这得靠额外工具链配合。
-
-w(watch)模式下,Rollup 默认不输出完整日志,容易误判“卡住”;加--verbose参数可看到每次 rebuild 的触发源 - 若用
output.sourcemap: true,确保output.file对应的目录存在(比如dist/),否则第一次 watch 会失败且无提示 - WebStorm 的 File Watcher 插件和 Rollup watch 冲突:二者都监听
.js文件,可能引发重复构建;建议关掉 File Watcher,只用 Rollup 自己的 watch - 想真热更新,得接
rollup-plugin-serve或rollup-plugin-livereload,它们启动本地服务并注入刷新脚本——这些插件的端口、publicDir 等参数必须和 WebStorm 配置里的 output 路径对齐
调试 rollup.config.js 时断点不生效
因为 rollup.config.js 是被 Node 直接 require() 执行的,不是普通 JS 入口文件,WebStorm 默认不把它当调试目标。
- 在
Run Configuration里,把JavaScript file改成rollup.config.js(不是 bin 文件),再加参数--config ./rollup.config.js—— 这样 Node 就会以它为入口,断点才有效 - 确保
rollup.config.js是 ES Module 格式(含export default {...}),且package.json有"type": "module";否则 WebStorm 调试时会报Cannot use import statement outside a module - 如果 config 里用了
import()动态加载插件(比如按环境导入不同插件),调试时这些异步 import 无法打断点,得改写成同步require()临时绕过
打包产物路径总和预期不符
WebStorm 不校验 rollup.config.js 里的路径逻辑,但 Node 运行时对相对路径极其敏感——尤其 input 和 output.dir 的基准目录是当前工作目录,不是 config 文件所在目录。
-
input: 'src/main.js'是相对于 WebStorm 配置里的Working directory,不是rollup.config.js所在位置 -
output.dir若设为'dist',实际产出是$WorkingDirectory$/dist/...;如果Working directory错配成src/,就会生成到src/dist/ - 多入口打包时,
output.entryFileNames中的[name]来自input的文件名,不是路径名;input: 'src/a/index.js'→[name]是index,不是a/index - Windows 下路径分隔符混用(
\vs/)可能导致插件(如@rollup/plugin-node-resolve)解析失败,统一用path.resolve(__dirname, ...)构造绝对路径最稳
path 和 format 都得手动验证一次。











