▷depuración en Visual Studio Code con babel-node ✔️ Foro Ayuda 【 2024 】

Solución:

No es necesario transpilar con babel-node

Configuración básica (mapas de origen, siempre)

Nota la sourceMaps y retainLines opciones en .babelrc:

{
  "presets": [
    "@babel/preset-env"
  ],
  "sourceMaps": "inline",
  "retainLines": true
}

Y luego en launch.json:

{
  "type": "node",
  "request": "launch",
  "name": "Debug",
  "program": "${workspaceFolder}/index.js",
  "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/babel-node",
  "runtimeArgs": [
    "--nolazy"
  ]
}

Configuración avanzada (mapas de origen, solo desarrollo)

Puede modificar lo anterior solo para generar mapas de origen / retenerLines en modo de desarrollo:

{
  "presets": [
    "@babel/preset-env"
  ],
  "env": {
    "development": {
      "sourceMaps": "inline",
      "retainLines": true
    }
  }
}

{
  "type": "node",
  "request": "launch",
  "name": "Debug",
  "program": "${workspaceFolder}/index.js",
  "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/babel-node",
  "runtimeArgs": [
    "--nolazy"
  ],
  "env": {
    "BABEL_ENV": "development"
  }
}

Notas

En la actualidad "type": "pwa-node" (ver más) no funciona con esta configuración.
Para "--nolazy" mira esto.
"BABEL_ENV": "development" – A menos que se establezca un valor diferente, el predeterminado es development, por lo que agregar esto en la configuración de lanzamiento no es esencial (pero hace las cosas más explícitas).

Pude hacerlo funcionar siguiendo estos pasos:

Package.json

Asegúrese de tener un script de compilación con mapas de origen Generacion.

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

tasks.json

Asegúrese de tener el tarea eso permite Código VS para construir con el npm texto.

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

launch.json

Configure el script para construir antes del lanzamiento con un preLaunchTask, iniciar el program desde el punto de entrada de la fuente, pero con el outDir apuntando al dist carpeta y con sourceMaps activado.

{
    "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"
}

Ahora, cada vez que presione F5, los babel La transpilación se ejecuta antes de que comience el proceso de Node, pero con todos los mapas de origen sincronizados. Con él pude usar puntos de interrupción y todas las demás cosas del depurador.

A partir de la versión 1.9, VS Code intenta automáticamente usar mapas de origen de forma predeterminada, pero debe especificar outFiles si los archivos transpilados no están en la misma carpeta que los archivos de origen.

Como ejemplo, aquí están los archivos relevantes. En este caso, babel se está traspasando del src carpeta a la lib carpeta.

Nota: Las entradas en package.json y .vscode/tasks.json solo son necesarios si desea que VS Code transpile los archivos antes de la depuración.

.vscode / launch.json

control+Cambio+PAG, >Debug: Open launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceRoot}/lib/index.js",
            "cwd": "${workspaceRoot}",
            "preLaunchTask": "build",
            "outFiles": [
                "${workspaceRoot}/lib/**.js"
            ]
        }
    ]
}

Nota: Solo especificar preLaunchTask si también configura el build tareas en package.json y .vscode/tasks.json.

package.json

control+PAG, package.json

{
  "scripts": {
    "build": "babel src -d lib -s"
  },
  "devDependencies": {
    "babel-cli": "^6.23.0",
    "babel-preset-env": "^1.1.10"
  }
}

Nota: Puede utilizar una versión diferente de babel-cli y diferentes presets de babel.

.vscode / tasks.json

control+Cambio+PAG, >Tasks: Configure Task Runner

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

Documentación oficial de VS Code

Mapas de origen

El depurador Node.js de VS Code admite mapas de código fuente JavaScript que ayudan a depurar lenguajes transpilados, por ejemplo, TypeScript o JavaScript minificado / uglificado. Con los mapas de origen, es posible realizar un solo paso o establecer puntos de interrupción en el origen original. Si no existe un mapa de origen para el origen original o si el mapa de origen está roto y no se puede asignar correctamente entre el origen y el JavaScript generado, los puntos de interrupción se muestran como no verificados (círculos huecos grises).

Los mapas de origen se pueden generar con dos tipos de inserción:

Mapas de origen en línea: el archivo JavaScript generado contiene el mapa de origen como un URI de datos al final (en lugar de hacer referencia al mapa de origen a través de un URI de archivo).
Fuente en línea: el mapa fuente contiene la fuente original (en lugar de hacer referencia a la fuente a través de una ruta).

VS Code admite tanto mapas de origen en línea y el fuente en línea.

La función del mapa de origen está controlada por el sourceMaps atributo que por defecto es true comenzando con VS Code 1.9.0. Esto significa que la depuración de nodos siempre intenta usar mapas de origen (si puede encontrar alguno) y, como consecuencia, puede incluso especificar un archivo de origen (por ejemplo, app.ts) con el program atributo.

Si necesita deshabilitar los mapas de origen por algún motivo, puede configurar el sourceMaps atribuir a false.

Si los archivos JavaScript generados (transpilados) no se encuentran junto a su fuente sino en un directorio separado, debe ayudar al depurador de VS Code a ubicarlos configurando el outFiles atributo. Este atributo toma múltiples patrones globales para incluir y excluir archivos del conjunto de archivos JavaScript generados. Siempre que establece un punto de interrupción en la fuente original, VS Code intenta encontrar el código JavaScript generado en los archivos especificados por outFiles.

Dado que los mapas de origen no se crean automáticamente, debe configurar el transpilador que está utilizando para crearlos. Para TypeScript, esto se puede hacer de la siguiente manera:

tsc --sourceMap --outDir bin app.ts

Esta es la configuración de inicio correspondiente para un programa TypeScript:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch TypeScript",
            "type": "node",
            "request": "launch",
            "program": "app.ts",
            "outFiles": [ "bin/**/*.js" ]
        }
    ]
}

Fuente

¡Haz clic para puntuar esta entrada!

(Votos: 0 Promedio: 0)

Tags : Babel Node / Visual Studio Code /

depuración en Visual Studio Code con babel-node