背景

1. 开发studio的material cli命令，类似umi，链路非常长，涉及较多依赖库。且需要在真实的项目中执行脚本
2. cli对应的代码是ts，通过tsc编译生成lib库，也就是说，实际执行的代码为lib内
3. 代码结构

方案

1. 在根目录下添加.vscode/launch.json文件

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",                               // nodejs的调试类型固定为node，<必填>
      "request": "launch",                          // 固定为launch，<必填>——launch|attach二选一
      "name": "调试 start",                          // 将会显示到vscode的debug栏的下拉菜单的名称，<必填>
      "cwd": "${workspaceFolder}/test/demo-web1",   // 命令的工作目录,[可选]
      "console": "integratedTerminal",              // console类型
      "runtimeExecutable": "npm",                   // 将要执行的命令
      "runtimeArgs": [                              // 命令参数列表
        "run",
        "start"
      ],
      "skipFiles": [
        "<node_internals>/**",                      // 忽略node内部代码
        "${workspaceFolder}/node_modules/**/*.js"   // 忽略node_modules代码
      ],                    
      "stopOnEntry": true,  // 在程序文件的入口处断点,[可选]——建议指定为true，免去了先找到对应文件再打开的苦恼
      "port": 5858          // 监听的调试端口号，与`script`中的设置保持一致
    }
  ]
}

2. cli代码中的tsconfig需包含sourcemap导出，保证能直接调试到源码

{
  "compilerOptions": {
    "outDir": "./lib",
    "experimentalDecorators": true,
    "allowJs": true,
    "target": "es5",
    "lib": [
      "es2015",
      "es6",
      "dom"
    ],
    "jsx": "react",
    "esModuleInterop": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "sourceMap": true,
  },
  "include": [
    "src"
  ]
}

3. 在源码中添加断点
4. 在调试面板执行调试
5. 快捷键F5启动调试