typescript - Det tomma innehållet i ts-fil i webbläsaren

Jag hade skapat ett projekt i ASP.NET-Core. Projektet har konfigurerats så att mappen wwwroot endast innehåller lokala filer som *.html, *.css, *.js och så vidare. Filer med ändelsen *.ts finns i en annan mapp som heter scripts. Allt ser ut som:

Inställningar för tsconfig.json:

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "noEmitOnError": true,
    "noImplicitAny": false,
    "outDir": "../wwwroot/appScripts/",
    "removeComments": false,
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules"    
  ]
}

Allt är bra kompilerat. Som du kan se: egenskapen sourceMap (i tsconfig.json) har värdet true, och i slutet av varje *.js (skapad av **.ts*) läggs sourceMapping till:

app.js.map:

{
  "version": 3,
  "file": "app.js",
  "sourceRoot": "",
  "sources": [
    "../../scripts/app.ts"
  ],
  "names": [
    "AppComponent",
    "AppComponent.constructor"
  ],
  "mappings": "(...)"
}

Lista över källor-punkter för bra fil ts:

Jag öppnade projektet i Chrome/Chrome Canary (med/utan debug - samma effekt). Gå sedan till källor (F12 -> Sources). Jag ser att filerna script/app.ts och script/boot.ts är tomma:

När jag försöker öppna script/app.ts i IE11 får jag felet:

Could not locate http://localhost:61272/appScripts/../../scripts/app.ts specified in source map http://localhost:61272/appScripts/app.js.map.

Kanske vet du vad som är fel? Jag tror att detta problem skapar ett annat problem: jag kan inte felsöka..

Svar #1

Saken är den att en webbläsare inte kan hitta källfiler som refereras i kartfilen.

Alternativet sourceRoot kan hjälpa dig att specificera källmapp.

Jag använder alternativen "inlineSourceMap" och "inlineSources" i felsökningsläge för att övervinna "source paths hell".

Uppdatering 1

Exempel på minimal tsconfig.json-fil för att generera inbäddade källkartor:

{
  "compilerOptions": {
    "target": "es5",
    "inlineSourceMap": true,
    "inlineSources": true
  },
  "exclude": [
    "node_modules"    
  ]
}

Du kommer att få något som

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXBwLmpz...

i utskrifts- ".js"-filer.

Men var medveten om att tsconfig.json-filen kan ignoreras av Visual Studio 2015 under vissa omständigheter (t.ex. Visual Studio 2015 - tsconfig.json - TypeScript 1.6.0 Beta)

För att få det att bara fungera via VS har jag lagt till "tsc" i efterbyggnadssteget. För att få filerna kompilerade bygger jag projektet.

Men för produktion skulle jag rekommendera att du använder Grunt- eller Gulp-bygguppgifter, eller Webpack.

Svar #2

Om du använder Chrome och inte serverar original .ts-filer tillsammans med .js-filer, kan du peka Chrome till en mapp där de ursprungliga källfilerna lagras utan att ändra serverns konfiguration.

  1. Öppna utvecklarverktyg och navigera till fliken Källor.

  2. Se till att FS-trädet är utökat (klicka

    3. knapp i övre vänstra hörnet om inte).

  3. Högerklicka var som helst i trädpanelen och välj Lägg till mapp i arbetsytan.
  4. Välj mappen där .ts-källor finns.
  5. En säkerhetsbekräftelsefält kommer att visas i huvudvisningsfönstret, acceptera det.

Relaterade artiklar