背景

你是否有过想要阅读 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 启动调试程序。

如果你有疑问，请下方留言讨论。