vscode 调试 es6 特性的 node 程序

背景

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

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