cum să depanăm TypeScript ambalat în VS Code?

TLDR: Cum pot configura un launch.json pentru un cod sursă bundlat cu sourcemaps?

Încerc să depanez un cod TypeScript în VS Code. Codul folosește module și îl împachetez într-un folder /dist. Nu îmi este clar cum pot să configurez o lansare care să poată găsi corespondența dintre src și dist.

Există multe întrebări existente despre depanarea TypeScript în VS Code. Dar până acum nu am găsit această problemă exactă.

Iată un exemplu minimal cu cod funcțional. Acest lucru îmi permite să fac depanare foarte bine. Voi introduce problema în a doua etapă.
De asemenea, acest launch.json folosește Firefox. Dar aș fi la fel de fericit folosind Chrome. De fapt, am încercat și m-am lovit de aceleași probleme.

index.html:

<!DOCTYPE html>
<html>
<head>
    <script src='main.js'></script>
</head>
<body></body>
</html>

main.ts:

console.log('hello from typescript');

tsconfig.json este configurat pentru a genera hărți sursă:

{
    "compilerOptions": {
        "sourceMap": true
    },
}

Și launch.json: conține o mapare a căii către src:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch index.html",
            "type": "firefox",
            "request": "launch",
            "reAttach": true,
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}",
            "pathMappings": [
                {
                    "url": "http://localhost:8080",
                    "path": "${workspaceFolder}/src"
                }
            ]
        }
    ]

Rulez tsc pentru a compila codul și folosesc serve . -p 8080 în folderul src/ pentru a găzdui codul. Acum, dacă setez un punct de întrerupere în main.ts și selectez run/start debugging, execuția se oprește la punctul de întrerupere. Totul funcționează bine.

Dar aș dori să import module în codul meu. După ce rulez yarn add uuid, să zicem că main.ts arată acum așa:

import {v4} from 'uuid';

console.log(v4());

În acest moment, este nevoie de un bundler pentru a procesa dependențele. Eu folosesc Parcel, dar cred că această întrebare este independentă de bundler-ul specific. Am modificat index.html pentru a lega de main.ts în loc de .js:

<!DOCTYPE html>
<html>
<head>
    <script src='main.ts'></script>
</head>
<body></body>
</html>

Codul este împachetat cu parcel src/index.html.

Acum pot rula serve . -p 8080 din folderul dist/. Codul funcționează, în consola de depanare din browserul meu pot vedea rezultatul. Și browserul recunoaște corect sourcemap-urile:

Dar în VS Code, toate punctele mele de întrerupere sunt marcate ca „neverificate” și codul nu se mai oprește:

Am încercat să ajustez fișierul meu launch.json, cu pathMappings diferite:

"pathMappings": [
    {
        "url": "http://localhost:8080",
        "path": "${workspaceFolder}/dist"
    }
],

Și specificând outFiles:

"outFiles": [
    "${workspaceFolder}/**/*.js",
    "!**/node_modules/**"
]

Configurația de lansare prezentată mai sus folosește Firefox, am încercat și Chrome. Și în loc de serve, am încercat parcel serve.

Nimic din toate acestea nu funcționează. În interiorul browserului (atât Chrome, cât și Firefox) pot depana codul fără probleme. Dar în VS Code, punctele de întrerupere sunt întotdeauna marcate ca neverificate.

Răspuns #1

Dacă folosești parcel serve -p 8080 src/index.html pentru a rula serverul de dezvoltare al lui Parcel, vei vedea un director sursă __parcel_source_root în instrumentele pentru dezvoltatori ale browserului:

Din câte pot să-mi dau seama, acesta nu este un director pe disc, dar ar trebui să-ți permită să faci asta în launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch index.html",
            "type": "pwa-msedge",
            "request": "launch",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}",
            "pathMapping": {
                "__parcel_source_root": "${webRoot}"
            },
            "skipFiles": [
                "${webRoot}/node_modules/**",
                "<node_internals>/**"
            ]
        }
    ]
}

Atunci doar asigură-te că lansezi sesiunea de depanare din interiorul vscode. În acest fel ar trebui să poți folosi punctele de oprire din cadrul vscode. Totuși, se pare că acest lucru nu sincronizează punctele de oprire între vscode și browser. Probabil există o soluție mai bună care face asta.

Rețineți că folderul dist/ de aici este generat de parcel, dar nu este direct vizibil în instrumentele de dezvoltare ale browserului.

Nu am testat folosind Firefox, dar îmi imaginez că ar trebui să funcționeze în același mod.

Un exemplu mai detaliat aici.