Visual studio code 使用babel节点在Visual Studio代码中进行调试

我正在使用：

• VS代码v1.3.1
• 节点v6.3.1
• 巴别塔节点v6.11.4
• 视窗10

我无法使用以下启动文件在断点处停止。 调试器运行并连接到端口，但当我使用断点运行应用程序时，它不会在断点处停止，而是直接运行。 任何人都有这个工作，请建议

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/src/app.js",
            "stopOnEntry": false,
            "args": [],
            "cwd": "${workspaceRoot}",
            "preLaunchTask": null,
            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/babel-node.cmd",
            "runtimeArgs": [
                "--nolazy"
            ],
            "env": {
                "NODE_ENV": "development"
            },
            "externalConsole": false,
            "sourceMaps": false,
            "outDir": null
        },
        {
            "name": "Attach",
            "type": "node",
            "request": "attach",
            "port": 5858,
            "address": "localhost",
            "restart": false,
            "sourceMaps": false,
            "outDir": null,
            "localRoot": "${workspaceRoot}",
            "remoteRoot": null
        },
        {
            "name": "Attach to Process",
            "type": "node",
            "request": "attach",
            "processId": "${command.PickProcess}",
            "port": 5858,
            "sourceMaps": false,
            "outDir": null
        }
    ]
}

---

我能够通过以下步骤使其工作：

Package.json 确保您有一个生成sourcemaps的生成脚本

"scripts": {
    "build": "babel src -d dist --source-maps"
}

tasks.json 确保您有任务，该任务允许VS代码使用npm脚本进行构建

{
    "version": "0.1.0",
    "command": "npm",
    "isShellCommand": true,
    "showOutput": "always",
    "suppressTaskName": true,
    "tasks": [
        {
            "taskName": "build",
            "args": [ "run", "build" ],
            "isBuildCommand": true
        }
    ]
}

launch.json 使用

preLaunchTask

将脚本配置为build before launch，从源入口点启动

程序，但
outDir
指向dist文件夹并启用
sourceMaps

{
    "name": "Launch",
    "type": "node",
    "request": "launch",
    "program": "${workspaceRoot}/src/server.js",
    "stopOnEntry": false,
    "args": [],
    "cwd": "${workspaceRoot}",
    "preLaunchTask": "build",
    "runtimeExecutable": null,
    "runtimeArgs": [ "--nolazy" ],
    "env": {
        "NODE_ENV": "development"
    },
    "externalConsole": false,
    "sourceMaps": true,
    "outDir": "${workspaceRoot}/dist"
}

现在，每次按F5键时，
babel
transfilation都会在节点进程开始之前运行，但所有sourcemaps都会同步。有了它，我可以使用断点和所有其他调试器功能。
从1.9版开始，VS Code默认情况下会自动尝试使用源映射，但如果传输的文件与源文件不在同一文件夹中，则必须指定outFiles

例如，以下是相关文件。在本例中，babel正在从
src
文件夹传输到
lib
文件夹

注意：仅当您希望VS code在调试前传输文件时，才需要
package.json
和
vscode/tasks.json中的条目


.vscode/launch.json
Ctrl+Shift+p，
>调试：打开launch.json

{
“版本”：“0.2.0”，
“配置”：[
{
“类型”：“节点”，
“请求”：“启动”，
“名称”：“启动计划”，
“程序”：“${workspaceRoot}/lib/index.js”，
“cwd”：“${workspaceRoot}”，
“预启动任务”：“构建”，
“外部文件”：[
“${workspaceRoot}/lib/**.js”
]
}
]
}

注意：如果您还在
package.json
和
.vscode/tasks.json
中设置了
build
任务，则仅指定
preLaunchTask


package.json
Ctrl+p，
package.json

{
“脚本”：{
“构建”：“巴别塔src-d lib-s”
},
“依赖性”：{
“巴别塔cli”：“^6.23.0”，
“巴别塔预设环境”：“^1.1.10”
}
}

注意：您可以使用不同版本的
babel cli
和不同的babel预设


.vscode/tasks.json
Ctrl+Shift+p，
>任务：配置任务运行程序

{
“版本”：“0.1.0”，
“命令”：“npm”，
“isShellCommand”：正确，
“showOutput”：“始终”，
“suppressTaskName”：true，
“任务”：[
{
“任务名”：“构建”，
“args”：[“运行”、“生成”]，
“isBuildCommand”：true
}
]
}


官方VS代码文档
源地图
VS代码的Node.js调试器支持JavaScript源代码映射，这些源代码映射有助于调试Transpile语言，例如TypeScript或小型化/丑化JavaScript。使用源映射，可以单步执行或在原始源中设置断点。如果原始源不存在源映射，或者源映射被破坏，并且无法在源和生成的JavaScript之间成功映射，则断点显示为未验证（灰色空心圆）

源映射可以使用两种内联生成：


内联源映射：生成的JavaScript文件在末尾包含作为数据URI的源映射（而不是通过文件URI引用源映射）
内联源：源映射包含原始源（而不是通过路径引用源）

VS代码支持内联源代码映射和内联源代码

源地图功能由
sourceMaps
属性控制，该属性默认为
true
，从VS code 1.9.0开始。这意味着节点调试总是尝试使用源映射（如果可以找到），因此，您甚至可以使用
program
属性指定源文件（例如app.ts）

如果出于某种原因需要禁用源映射，可以将
sourceMaps
属性设置为
false

如果生成的（传输的）JavaScript文件不在其源文件旁边，而是在单独的目录中，则必须通过设置outFiles属性来帮助VS代码调试器定位它们。该属性采用多个glob模式来包含和排除生成的JavaScript文件集中的文件。无论何时在原始源代码中设置断点，VS代码都会尝试在outFiles指定的文件中查找生成的JavaScript代码

由于源映射不是自动创建的，因此必须配置用于创建源映射的transpiler。对于TypeScript，这可以通过以下方式完成：

tsc--sourceMap--outDir bin app.ts

这是TypeScript程序的相应启动配置：

{
“版本”：“0.2.0”，
“配置”：[
{
“名称”：“启动类型脚本”，
“类型”：“节点”，
“请求”：“启动”，
“程序”：“app.ts”，
“外部文件”：[“bin/***/.js”]
}
]
}

无需使用@babel/node进行传输
基本设置（sourcemaps-始终）
注意
.babelrc
中的
sourceMaps
和
retainLines
选项：

{
“预设”：[
“@babel/preset env”
],
“源地图”：“内联”，
“保留线”：真
}

然后在
launch.json中<
"scripts": {
  "build": "babel src -d dist --source-maps",
},

{
  "version": "2.0.0",
  "tasks": [{
    "label": "build-babel",
    "type": "npm",
    "script": "build",
    "group": "build"
  }]
}

{
  "version": "0.2.0",
  "configurations": [{
    "type": "node",
    "request": "launch",
    "preLaunchTask": "build-babel",
    "name": "Debug",
    "program": "${workspaceRoot}/src/server.js",
    "outFiles": ["${workspaceRoot}/dist/**/*.js"]
  }]
}

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Debug",
            "program": "${workspaceRoot}/src/cli/index.js",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "*": "${workspaceRoot}/src/*"
            },
            "outFiles": [
                "${workspaceRoot}/lib/**/*.js"
            ]
        }
    ]
}

{
"version": "0.2.0",
"configurations": [
    {   
        "cwd":"<path-to-application>",
        "type": "node",
        "request": "launch",
        "name": "babel-node debug",
        "runtimeExecutable": "<path-to-app>/node_modules/.bin/babel-node",
        "program": "<path-to-app-entry-file>/server.js",
        "runtimeArgs": ["--nolazy"]
    }
]
}

    {
        "presets": ["@babel/preset-env"]
    }