背景
你是否有过想要阅读 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 依赖包
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 选项；
"build": "babel ./src -d ./build --source-maps",
配置 babel.config.js 文件
const presets = [
[
"@babel/env",
{
targets: {
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1",
},
useBuiltIns: "usage",
},
],
];
module.exports = { presets };
修改 launch.json 文件
vscode 的调试配置文件，左侧小虫子按钮，右侧齿轮按钮。第一次打开调试文件有点慢，耐心等待。
怎么弄出来 launch.json
{
"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 启动调试程序。
如果你有疑问，请下方留言讨论。
