Wie füge ich einem vorhandenen Typoskript ein Asp.Net MVC-Projekt?[doppelt]

StackOverflow https://stackoverflow.com//questions/12680486

  •  12-12-2019
  •  | 
  •  

Frage

Ich liebe die Idee hinter Typescript, kann aber anscheinend nicht herausfinden, wie man sie in eine einfügt ASP.Net MVC-Projekt.Ich habe die Visual Studio-Erweiterung bereits installiert, aber ich kann anscheinend kein Beispiel oder keine Dokumentation zum Hinzufügen finden *.ts dateien, die in kompiliert werden *.js Datei.

Bearbeiten:Sollte ich eigentlich so replizieren, wie das Win8-Beispiel .jsproj lieferumfang und Griffe .ts dateien?Oder funktioniert das nur für HTML / JS Win8-Projekte?

War es hilfreich?

Lösung

Warnung: Diese Antwort ist jetzt ziemlich veraltet, da sich sowohl Typescript als auch MVC seit dieser Antwort erheblich geändert haben.Ich werde später ein Update versuchen.- Richcoder

Dank Sohnee für die Antwort.

Sie können TypeScript-Dateien zu einem vorhandenen Projekt hinzufügen, indem Sie das Dialogfeld Hinzufügen > Neues Element verwenden.exampleImage Bitte beachten Sie, dass sich das Element 'Typescript-Datei' nicht unter der Webgruppe befindet, sondern in diesem Fall unter dem übergeordneten Element Visual C #.

Dies sollte eine Typoskriptdatei hinzufügen und Visual Studio erledigt den Rest.

Dann müssen Sie diese Zeilen zur Projektdatei hinzufügen:

 <ItemGroup>
    <AvailableItemName Include="TypeScriptCompile" />
 </ItemGroup>
 <ItemGroup>
    <TypeScriptCompile Include="$(ProjectDir)\**\*.ts" />
 </ItemGroup>
 <Target Name="BeforeBuild">
    <Exec Command="&quot;$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.0.0\tsc&quot; -target ES5 @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" IgnoreExitCode="true" />
 </Target>

Es hat perfekt für mich funktioniert, aber bitte kommentieren Sie, wenn Sie auf Probleme stoßen.

Andere Tipps

Das ist richtig.alles, was Sie brauchen, ist das MS Build-Ziel, um das zu erstellen.ts-Dateien in .js-Dateien.Das Win8-Beispiel zeigt ein BeforeBuild-Ziel zum Aufrufen von tsc für alle Dateien, die zu ItemGroup TypeScriptCompile gehören, das als $(ProjectDir)*** definiert ist.ts (oder alle .ts-Dateien in Ihrem Projekt).

Das Replizieren dieses Musters sollte in jedem msbuild-Projekt und nicht nur in Win8-Projekten funktionieren.

Hier ist ein Beispiel von dem, wovon ich spreche:Fügen Sie dies jedem msbuild-Projekt hinzu, und Sie sollten jedes kompilieren.ts-Datei in das Äquivalent .js-Datei, wenn Ihr Build startet.. 

<ItemGroup> 
   <TypeScriptCompile Include="$(ProjectDir)\**\*.ts" />
</ItemGroup>


<Target Name="TypeScriptCompile" BeforeTargets="Build">
   <Message Text="Compiling TypeScript files" />
   <Exec Command="&quot;$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.0.0\tsc&quot; -target ES5 @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" />
</Target>

Ich habe ein Nuget-Paket zusammengestellt, das Ihrem Projekt eine msbuild-Zieldatei hinzufügt.Es führt den tsc-Compiler aus und bereinigt seine Ausgabe, sodass Sie auf die Fehler in Visual Studio doppelklicken und zur Datei / Zeile / Spalte springen können.

https://www.nuget.org/packages/Sholo.TypeScript.Build

Sie müssen die Build-Aktion im Eigenschaftenfenster für alles, was tsc kompilieren soll, auf 'TypeScriptCompile' setzen.Nach ein paar Tagen Basteln mit TypoSkript habe ich festgestellt, dass das .ts-Dateien, auf die verwiesen wird, sollten auf TypeScriptCompile gesetzt werden, aber die Dateien, auf die nur verwiesen wird, sollten nicht, sondern ymmv .Außerdem müssen Sie möglicherweise alle Dateien anzeigen und das Original hinzufügen .js-Datei.Wenn Sie verwandte gruppieren möchten.z /.js/.d.ts-Dateien zusammen, sehen Sie sich die Erweiterung VSCommands an.Workflow ist auch ziemlich nett mit NetDemon / ähnlichen Erweiterungen.

Wenn Sie verwenden Bündelung und Minimierung, Ich habe gerade eine Implementierung von IBundleTransform veröffentlicht, die TypoSkript in Javascript kompiliert.Es ist auf GitHub und NuGet (Installationspaket TypeScriptBundleTransform).Wenn Sie Bündelung und Minimierung noch nicht verwenden, ist es einen Blick wert!

Update:

Einfach installieren Web Essentials 2012 plugin, Sie haben eine automatische Kompilierung beim Speichern - für beide.js und .min.js und eine übersichtliche geteilte Ansicht, um die JavaScript-Ausgabe neben Ihrem TypeScript-Code anzuzeigen.

Dies ist eine grobe Methode, die ich verwendet habe:

Klicken Sie mit der rechten Maustaste auf Ihr Projekt> Eigenschaften> Ereignisse erstellen

PreBuild-Box fügen Sie dies ein (erstellt rekursiv alle.ts-Dateien im Projekt):

forfiles /S /P $(ProjectDir) /m *.ts /c "cmd /c tsc @file"

Zum Erstellen einer bestimmten Eintragsdatei:

tsc $(ProjectDir)MyScripts/myfile.ts

Ich bin mir sicher, dass es einen besseren Weg gibt, dies zu tun.

Wenn Sie das verwenden Microsofts ASP.NET Weboptimierungs-Framework (aka Bündelung und Minimierung), dann versuche das zu benutzen Bündeltransformator mit installiertem Modul Bundletransformator.TypoSkript.Neben dem Kompilieren von TypeScript-Code zu JS können Sie auch eine Minimierung des generierten JS-Codes mithilfe anderer Module des Bundle Transformers erstellen: Bundletransformator.MicrosoftAjax, Bundletransformator.Yui, Bundletransformator.Schließung, Bundletransformator.JSMin, Bundletransformator.UglifyJS und Bundletransformator.Packer.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top