extensions - visual studio code typescript auto compile

Depurar paquete web incluido nodo ts con código de Visual Studio

Question

(De alguna manera relacionado con esto, pero más específico para VsCode )

Estoy intentando depurar el kit de inicio de AngularU con código de Visual Studio. Pero está fusionando el resultado de ts dentro de un solo bundle.js con un bundle lateral.js.map :

↳web
↳dist
↳client
↳server
⇒bundle.js
⇒bundle.js.map
↳src
⇒server.ts
⇒client.ts

Cuando intento ejecutarlo obtengo un error de la interfaz de usuario de VS:

request ''launch'': cannot launch program ''/home/.../web/src/server.ts''; setting the ''outDir'' attribute might help

outDir funciona bien en mis otros proyectos (no usando el paquete web) cuando los archivos de salida no se combinan, pero aquí no ayuda. Seguro que está buscando server.js (pero solo hay un bundle.js y su archivo de mapa).

¿Hay alguna opción outFile para la salida generada de un solo archivo?

Mi launch.json:

{
"name": "WebServer",
"type": "node",
"request": "launch",
"program": "./web/src/server.ts",
"stopOnEntry": false,
"args": [],
"cwd": "./web",
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development"
},
"externalConsole": false,
"sourceMaps": true,
"outDir": "./web/dist/server"
}

EDITAR: Se ejecuta cuando cambio el nombre de la salida del servidor webpack como server.js y server.map.js (en lugar de bundle. *), Pero los puntos de interrupción no funcionan desafortunadamente:

Aquí está el contenido del archivo server.js.map.

Tanto el compilador TS como el paquete web están configurados para crear un mapa fuente de acuerdo con este tutorial .

¿Me estoy perdiendo de algo?

EDIT2 : El problema con los puntos de interrupción parece ser el URI de las fuentes en el archivo del mapa.

Cuando gire esto

"webpack:///./src/server.ts",

dentro de esto

"../../src/server.ts",

los puntos de interrupción están funcionando.

Answer 1

Así es como lo hago funcionar:

1. Tener VsCode atLeast 1.1.0 (antiguo tendrá problemas con sourceRoot)

2. Establezca el archivo del paquete con el mismo nombre que su directorio principal en webpack.config.js

   output: {
   path: path.join(__dirname, ''dist'', ''server''),
   filename: ''server.js''
   }, 

3. y establezca el directorio padre como ''outdir'' en launch.json:

   ...
   "sourceMaps": true,
   "outDir": "${workspaceRoot}/dist/server",
   "smartStep":true

4. Solicite a webpack que muestre la ruta absoluta para el mapa de origen en webpack.config.json

   output : {
   ...
   devtoolModuleFilenameTemplate : ''[absolute-resource-path]'',
   devtoolFallbackModuleFilenameTemplate: ''[absolute-resource-path]?[hash]''
   }