如何设置VSCode以配置Rollup打包工具的开发环境？

本文共计718个文字，预计阅读时间需要3分钟。

在VSCode中，默认终端不会自动识别全局安装的`rollup`命令。您需要先进行局部安装`rollup`：

• 统一用 npx rollup -c 启动，确保调用的是项目本地版本
• 在 package.json 的 scripts 里加一条："build": "rollup -c"，然后用 VSCode 的「运行脚本」功能（Ctrl+Shift+P → “Tasks: Run Script”）触发，比手动输更稳
• 如果用了 TypeScript，确认 rollup-plugin-typescript 或 @rollup/plugin-typescript 已正确安装，且 tsconfig.json 中 "compilerOptions": { "declaration": false, "sourceMap": true } 已开启

为什么 VSCode 里断点不进 src 文件，只停在 dist/bundle.js

这是最常被忽略的环节：VSCode 调试器默认不读 rollup.config.js 里的 output.sourcemap 配置，它依赖 launch.json 显式声明映射关系。

• 按 Ctrl+Shift+P → “Debug: Open launch.json”，选 Node.js 环境，生成基础配置
• 修改 launch.json，关键字段必须对齐打包输出：

  { "type": "node", "request": "launch", "name": "Debug Rollup Build", "program": "${workspaceFolder}/node_modules/rollup/dist/bin/rollup", "args": ["-c"], "outFiles": ["${workspaceFolder}/dist/**/*.js"], "sourceMaps": true, "smartStep": true }

• outFiles 必须指向你实际输出的 JS 路径，比如你设了 output.file: 'dist/index.mjs'，就得写成 "${workspaceFolder}/dist/index.mjs"
• 确保 rollup.config.js 中 output.sourcemap 是 true 或 'inline'，不能是 false

哪些 rollup 插件在 VSCode 里真正有用

插件不是越多越好，很多只是构建时用，对编辑体验无感。真正提升 VSCode 编码效率的只有这几个：

• @rollup/plugin-node-resolve：让 import 第三方包时不红波浪线（配合 TS 的 types 声明才完整）
• @rollup/plugin-typescript：提供 TS 类型检查 + 自动补全（前提是 tsconfig.json 的 include 包含了 src/**/*）
• @rollup/plugin-alias：路径别名（如 @/utils）能让 VSCode 跳转和重命名准确，否则会提示 “Cannot find module”
• 别装 rollup-plugin-serve 和 rollup-plugin-livereload 到 devDependencies 里还指望它们在 VSCode 里起作用——它们只影响命令行启动的服务器，跟编辑器无关

VSCode 不是打包工具，它只是管道。所有构建逻辑都在 rollup.config.js 和 package.json 里，VSCode 的价值在于把 sourceMap 路径、类型服务、调试入口这三处对齐。错一个，你就得在 bundle.js 里手动找变量。