VSCode插件调试Rollup打包测试-VSCode-PHP中文网

vscode断点停在dist而非src，是因为调试器只认launch.json的outfiles和sourcemaps配置，不读rollup.config.js；需确保rollup输出sourcemap、tsconfig开启sourcemap，且launch.json中outfiles路径与rollup实际输出文件（如dist/index.mjs）完全匹配。

vscode插件调试rollup打包测试

VSCode 里调试 Rollup 打包脚本，为什么断点总停在 dist 文件里

因为 VSCode 调试器根本不读 rollup.config.js，它只认 launch.json 里写的 outFiles 和 sourceMaps。哪怕你配置了 output.sourcemap: true，只要 outFiles 路径没对上生成的 JS 文件，断点就永远进不了 src/。

常见错误现象：

在 src/main.js 打断点，运行调试后停在 dist/bundle.js 某行，控制台还报 Could not read source map
rollup.config.js 里设了 output.file: 'dist/index.mjs'，但 launch.json 的 outFiles 写成 "${workspaceFolder}/dist/**/*.js" —— 后缀不匹配，直接失效

实操建议：

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

rollup.config.js 中必须显式开启 sourcemap：output: { sourcemap: true }（不能是 'hidden' 或 false）
launch.json 的 outFiles 必须精确匹配输出路径，比如输出是 dist/index.mjs，就得写 "${workspaceFolder}/dist/index.mjs"
如果用 output.dir，确保实际生成的是 .js 文件；用了 @rollup/plugin-terser 可能会改后缀，得同步调整 outFiles

npx rollup -c 是唯一靠谱的启动方式

直接在 VSCode 终端敲 rollup -c 大概率报 command not found，不是 Node 没装好，而是 VSCode 终端默认不识别 node_modules/.bin/ 下的可执行文件。

使用场景：

项目本地安装了 rollup（npm install rollup --save-dev），但没全局安装
多个项目用不同版本 Rollup，必须隔离运行环境

实操建议：

永远用 npx rollup -c 启动，它强制走当前项目的 node_modules/rollup
在 package.json 加脚本："scripts": { "build": "rollup -c", "dev": "rollup -c -w" }，然后用 Ctrl+Shift+P → “Tasks: Run Script” 触发，比手动输更稳、可复用
别信“装个插件就能一键运行”的说法——Rollup 本质是命令行工具，VSCode 只负责调用和调试

哪些 Rollup 插件真影响 VSCode 编辑体验

90% 的 Rollup 插件只在打包时起作用，对编辑器里的红波浪线、跳转、补全毫无帮助。装一堆反而拖慢 TS 语言服务。

真正有用的就这几个：

@rollup/plugin-node-resolve：解决 import _ from 'lodash' 这类第三方包的红波浪线，但需配合 TS 的 types 声明才完整
@rollup/plugin-typescript 或 @rollup/plugin-sucrase：让 TS 类型检查提前介入构建流程，避免打包时才发现类型错误
@rollup/plugin-alias：如果你用了路径别名（如 @/utils），这个插件能让 VSCode 正确解析跳转

注意：@rollup/plugin-commonjs、@rollup/plugin-terser 这类纯构建插件，对编辑体验零影响，别指望它们让 import 更顺滑。