vscode 调试 es6 特性的 node 程序
作者: dkvirus 发表于: 2019-01-03 11:08:00 最近更新: 2019-03-29 17:18:51

背景

你是否有过想要阅读 dva、roadhog、umi 源码的冲动,兴致冲冲的把代码拉到本地,跑一下入口文件,结果报如下错误:import 语法不支持。

import语法报错

我们知道可以使用 babel 对源码目录 src 进行编译生成 build 目录,在 build 目录里打断点是生效的,but,看一下 build 目录下的文件。这种编译后的代码无论从优雅性、可阅读性都让人抓狂。

build目录编译后代码

那么问题来了,官方人员是如何调试代码的呢?我曾去作者的 github blog 询问调试过程,可能是描述的关键词不准确,然后,就没有然后了……..

万幸的是,最近读到一篇文章 Visual Studio Code 中调试使用 ES6 特性的 Node.js,完美解决我的问题,👍可以在 src 目录打断点调试代码👍。不过文章可能写的比较早(17年9月26日),参照作者的 demo 并不是很顺利,我猜测是由于 babel 的升级导致我和作者的测试结果有差异,我已经给作者提了一份 issue,如果他看见,也许会更新文档。

步骤

原文使用的还是 babel6,并且 scripts 脚本没有添加 –source-maps 选项,下面进行补充。想要跑 demo 还是参考原文 Visual Studio Code 中调试使用 ES6 特性的 Node.js

安装 babel 依赖包

1
2
3
4
mkdir study-debug
cd study-debug
npm init -y
npm i -D @babel/cli @babel/core @babel/preset-env

修改 package.json 文件

修改 package.json 中 scripts 属性。build 脚本是将 src 目录下源码编译后输出到 build 目录,千万别忘了后面还有 –soruce-maps 选项;

1
"build": "babel ./src -d ./build --source-maps",

配置 babel.config.js 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const presets = [
[
"@babel/env",
{
targets: {
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1",
},
useBuiltIns: "usage",
},
],
];

module.exports = { presets };

修改 launch.json 文件

vscode 的调试配置文件,左侧小虫子按钮,右侧齿轮按钮。第一次打开调试文件有点慢,耐心等待。

怎么弄出来 launch.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceRoot}/build/index.js",
"sourceMaps": true,
"trace": true,
"outFiles": [
"${workspaceRoot}/build/*"
]
},
{
"type": "node",
"request": "attach",
"name": "Attach",
"port": 5858
}
]
}

调试过程

  • npm run build 编译代码;
  • 在 src 源码目录下打断点;
  • F5 启动调试程序。
友链
首页
me
动态
RSS