Come eseguire il debug di Typescript in Visual Studio 2015 asp.net 5?

Question

Esiste un modo per eseguire il debug dei file dattiloscritti da Visual Studio 2015 CTP6 asp.net 5? In caso contrario, forse c'è un modo per configurare i file della mappa sorgente, quindi quando eseguo il debug nel browser e posso salvare automaticamente le modifiche ai miei file .ts sul server? Questo potrebbe essere difficile, perché i file .ts sono compilati da Gulp, ma forse qualcuno ha trovato una buona soluzione per questo?

Answer 1

Il debug di TypeScript con Visual Studio funziona con le impostazioni corrette.

1. In primo luogo si fare in modo che si crea fonte Mappe durante la compilazione dattiloscritto a JavaScript. Quindi dovresti avere un file xxx.js.map vicino a ogni xxx.js.

   Come mappe di origine eseguendo il compilatore dattiloscritto al di fuori di Visual Studio non provoca alcuna difficoltà, al TSC riga di comando add:

   --sourcemap %1.ts 
   

   lo script sorso di solito creare sourcemaps per impostazione predefinita.

2. Configura la tua applicazione Web in Visual Studio.

   Set Internet Explorer come browser iniziale. Ho capito che funziona solo con IE e non penso che nessun altro browser funzionerà. (modificare: Da qualche parte ho letto che c'è un ponte Webkit debug, in modo da Chrome debug dovrebbe essere possibile, ma non ricordo la fonte.)

   nelle proprietà del progetto passare alla scheda "Web" e configurare il Sezione "Debugger" in basso: Disattiva tutti i debugger! Ciò è contro l'intuizione e si potrebbe visualizzare questo messaggio di errore:

   Si è tentato di avviare il debugger, ma in base alle impostazioni di debug correnti nella pagina delle proprietà Web non è necessario eseguire il debug.

   Ciò si verifica quando è selezionata l'opzione "Non aprire una pagina. Attendi una richiesta da un altro processo" e il debug di ASP.NET è disabilitato. Controlla le tue impostazioni nella pagina delle proprietà web e riprova. Come dice il messaggio di errore, l'azione di avvio nella parte superiore delle proprietà Web dovrebbe essere un'altra opzione, ad esempio "Current page".

   Impostare punti di interruzione nel codice .ts all'interno di Visual Studio ora o successivo.

   Hit F5

Sebbene sia possibile utilizzare Visual Studio Editor per eseguire il debug e modificare .ts file, "Modifica e continuazione" non funzionerà, non esiste attualmente alcuna browser in grado di ricaricare .js e .js.map file e continua. (Correggetemi chiunque se sbaglio e sarò felice.)

Answer 2

Il modo più semplice che ho trovato è di mettere tutti i file dattiloscritti nella cartella wwwroot/app e lasciare i file js generati da Visual Studio così come sono.Usando gulp semplicemente inseriscili nel file html. Finalmente rilasciato Visual Studio 2015 funziona alla grande e con gulp task posso anche configurare facilmente js in bundle per la produzione.

Answer 3

Quando si utilizza gulp, è possibile scrivere le sourcemaps con una directory relativa. In questo modo i tuoi file TS vengono risolti correttamente da Visual Studio. Io uso gulp-typescript e gulp-sourcemaps per la mia compilation TypeScript.

di sotto della parte di compilazione del mio file gulpfile.js (ricordarsi di disattivare la compilazione dattiloscritto nel file di progetto)

var tsProject = ts.createProject({ 
    declarationFiles: false, 
    noExternalResolve: false, 
    target: 'ES5', 
    sortOutput: true, 
    noEmitOnError: false, 
    sourceMap:true 
}); 

gulp.task('script', function() { 
    var tsResult = gulp.src('App/Ts/**/*.ts') 
      .pipe(sourcemaps.init()) 
      .pipe(ts(tsProject)); 
    return tsResult.js.pipe(concat('App.js')) 
      .pipe(sourcemaps.write('.', {includeContent:false, sourceRoot: '../../App/Ts/'})) 
      .pipe(gulp.dest('wwwroot/js')); 
}); 

(ho modificato il mio gulpfile per migliorare la leggibilità, in modo da controllare per qualsiasi compilation/errori di codifica)

Answer 4

In ASP.NET 5 RC1 è possibile istruire il compilatore TypeScript per generare file .map aggiungendo un file chiamato tsconfig.json alla directory radice del progetto. Visual Studio ha anche un modello per questo chiamato "File di configurazione JSON TypeScript". Di default ha il seguente contenuto:

{ 
    "compilerOptions": { 
    "noImplicitAny": false, 
    "noEmitOnError": true, 
    "removeComments": false, 
    "sourceMap": true, 
    "target": "es5" 
    }, 
    "exclude": [ 
    "node_modules", 
    "wwwroot" 
    ] 
} 

L'impostazione "Sourcemap" istruisce il compilatore dattiloscritto per generare i file di mappa che sono necessari per il debug.

Nel mio caso ho rimosso il valore "wwwroot" dalla sezione "exclude" perché i miei file di origine TypeScript angolare si trovano sotto wwwroot \ App.

spiegazione dettagliata delle impostazioni tsconfig.json può essere trovato qui: https://github.com/Microsoft/typescript/wiki/tsconfig.json

Answer 5

Il modo migliore per gestire file di mappa che ho trovato è quello di includere la fonte dentro di sé i file generato .js. Questa è ovviamente una soluzione solo per un ambiente di sviluppo.

mia tsconfig.json di seguito:

{ 
    "compilerOptions": { 
     "noImplicitAny": false, 
     "noEmitOnError": true, 
     "removeComments": false, 
     "target": "es5", 
     "module": "system", 
     "moduleResolution": "node", 
     "outDir": "./wwwroot/scripts", 
     "experimentalDecorators": true, 
     "emitDecoratorMetadata": true, 
     "inlineSourceMap": true, 
     "inlineSources": true 
    }, 
    "exclude": [ 
     "node_modules", 
     "wwwroot" 
    ] 
} 

Le impostazioni che sono dopo sono inlineSourceMap e inlineSources.

Questo aiuta anche a risolvere i problemi causati dallo spostamento dello .js generato in percorsi diversi e non doversi preoccupare di dove vanno i file della mappa.