VSCode怎么配置Rollup打包工具的开发环境-VSCode-PHP中文网

rollup在vscode中需正确配置sourcemap、launch.json及本地命令调用：用npx rollup -c或package.json脚本运行，launch.json中outfiles和sourcemaps须匹配rollup.config.js输出路径，确保断点命中src文件。

vscode怎么配置rollup打包工具的开发环境

rollup 的开发环境在 VSCode 里不是“配一下插件就跑起来”的事，它本质是一套命令行驱动的构建流程，VSCode 只负责编辑、调试和任务调度。核心问题在于：**配置错位（比如把 rollup.config.js 当成纯配置文件忽略执行逻辑）、插件冗余（装一堆但没启用或冲突）、调试断点不生效（sourceMap 路径错或未关联）**。

怎么让 rollup 命令在 VSCode 终端里正常运行

VSCode 默认终端不会自动识别全局 rollup 命令，尤其你用的是局部安装（npm install rollup --save-dev）。别直接敲 rollup -c，容易报 command not found。

统一用 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 显式声明映射关系。

VSCode

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

下载

按 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 里起作用——它们只影响命令行启动的服务器，跟编辑器无关