讲师中心 微信公众号
AI工具推荐 视频效率加速

VSCode插件调试Rollup打包测试

星墨姑娘_8593

星墨姑娘_8593

发布时间:2026-08-25 08:53:00

|

136人浏览过

|

来源于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

避免常见的 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 更顺滑。

TS 项目里调试失败,大概率卡在这三个地方

不是 Rollup 配错了,而是 TypeScript 和调试链路没对齐。最常被忽略的是 tsconfig.json 本身没开 sourcemap。

关键参数差异:

  • compilerOptions.sourceMap 必须为 true(否则 Rollup 即使生成 sourcemap 也没源信息)
  • compilerOptions.declaration 建议设为 false(除非你真要发布类型声明,否则增加构建负担)
  • compilerOptions.outDir 如果设了,要和 Rollup 的 output.dir 一致,否则 VSCode 找不到映射目标

性能影响:

  • 开 sourceMap: true 会让 TS 编译变慢,但调试阶段值得;上线构建可关掉
  • 如果同时用 TS + Rollup + @rollup/plugin-typescript,记得关掉 tsconfig.json 里的 noEmit,否则 Rollup 拿不到编译产物
调试链路其实就三件事:TS 输出带 map、Rollup 不覆盖 map、VSCode 按路径找到它。少一个,断点就掉进 dist 里出不来。路径匹配这事,连多一个星号、少一个后缀都会失败。

热门AI工具

更多
讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

相关专题

更多
vscode是什么_vscode怎么安装配置
vscode是什么_vscode怎么安装配置

VS Code(Visual Studio Code)是一款免费、开源的跨平台代码编辑器,由微软开发和维护。它被广泛用于软件开发和编程,支持多种编程语言和框架。VS Code 同时提供了丰富的功能和扩展性,使开发者可以高效地编写、编辑和调试代码。

1255

2023.06.30

vscode怎么运行代码
vscode怎么运行代码

vscode是一个运行于MacOS X、Windows和Linux之上的,针对于编写现代Web和云应用的跨平台源代码编辑器;vscode免费而且功能强大,对JavaScript和NodeJS的支持非常好,自带很多功能,例如代码格式化,代码智能提示补全、Emmet插件等。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

2612

2023.07.21

vscode使用的框架介绍
vscode使用的框架介绍

VSCode是一款跨平台代码编辑器,它基于Electron框架和Monaco Editor构建。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

1889

2024.03.14

vscode一般用来写什么语言
vscode一般用来写什么语言

VSCode是一款功能强大的代码编辑器,支持多种编程语言和文件格式。它内置对 JavaScript、Python、Java、C++、TypeScript、HTML/CSS、Go 等语言的支持。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

1707

2024.03.14

vscode可以写什么语言
vscode可以写什么语言

vscode是一款强大的代码编辑器,支持多种编程语言的开发。通过安装扩展,可以为 JavaScript/TypeScript、Python、Java、C#、PHP、Go、Ruby、Rust、HTML/CSS 等语言提供智能代码补全、调试和格式化等功能。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2587

2024.03.15

vscode中文设置方法
vscode中文设置方法

方法一:在设置页面中,搜索“locale”,并选择“zh-cn”。方法二:按“Ctrl Shift P”快捷键,输入“Configure Display Language”,将语言修改为“zh-cn”。如果上述方法无效,可考虑安装中文插件。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

1798

2024.03.15

vscode用途介绍
vscode用途介绍

Visual Studio Code(VSCode)是一款由 Microsoft 开发的多功能文本编辑器,适用于各种编程语言。作为一款开源软件,VSCode 拥有代码高亮、自动补全、调试、Git 集成等强大功能,成为程序员不可或缺的工具。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

1242

2024.03.15

vscode和visualstudio的区别
vscode和visualstudio的区别

Visual Studio是一款功能强大的集成开发环境(IDE),适用于专业开发人员进行复杂项目的构建。而VSCode则是一款轻量级的代码编辑器,更适合各种规模的项目开发。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

1096

2024.03.15

LLVM自定义Pass怎么写
LLVM自定义Pass怎么写

本专题聚焦LLVM自定义Pass开发,整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。

100

2026.09.30

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn