既存の Asp.Net MVC プロジェクトに typescript を追加するにはどうすればよいですか?[重複]
-
12-12-2019 - |
質問
私は typescript の背後にあるアイデアが大好きですが、それを ASP.Net MVC プロジェクトに組み込む方法がわかりません。Visual Studio 拡張機能はすでにインストールされていますが、追加方法の例やドキュメントが見つからないようです。 *.ts
コンパイルされるファイル *.js
ファイル。
編集:実際、Win8 の例の方法を複製する必要がありますか? .jsproj
インクルードとハンドル .ts
ファイル?それとも、HTML/JS Win8 プロジェクトでのみ機能しますか?
解決
警告: Typescript と MVC の両方がこの回答以来大幅に変更されたため、この回答はかなり古いものになっています。後でアップデートしてみます。- リッチコーダー
おかげで ソニー 答えのために。
[追加] > [新しい項目] ダイアログを使用して、TypeScript ファイルを既存のプロジェクトに追加できます。「Typescript ファイル」項目は Web グループの下にはなく、その親 (この場合は Visual C#) の下にあることに注意してください。
これにより TypeScript ファイルが追加され、残りは Visual Studio が実行します。
次に、次の行をプロジェクト ファイルに追加する必要があります。
<ItemGroup>
<AvailableItemName Include="TypeScriptCompile" />
</ItemGroup>
<ItemGroup>
<TypeScriptCompile Include="$(ProjectDir)\**\*.ts" />
</ItemGroup>
<Target Name="BeforeBuild">
<Exec Command=""$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.0.0\tsc" -target ES5 @(TypeScriptCompile ->'"%(fullpath)"', ' ')" IgnoreExitCode="true" />
</Target>
私にとっては完璧に機能しましたが、何か問題が発生した場合はコメントしてください。
他のヒント
それは正しいです。必要なのは、.ts ファイルを .js ファイルにビルドするための ms ビルド ターゲットだけです。Win8 の例では、itemGroup TypeScriptCompile に属するすべてのファイルで tsc を呼び出す beforeBuild ターゲットを示しています。これは $(ProjectDir)***.ts (またはプロジェクト内のすべての .ts ファイル) として定義されています。
このパターンのレプリケートは、Win8 プロジェクトだけでなく、あらゆる msbuild プロジェクトでも機能するはずです。
私が話している内容のサンプルは次のとおりです。これを任意の msbuild プロジェクトに追加すると、ビルドの開始時に .ts ファイルが同等の .js ファイルにコンパイルされるはずです。
<ItemGroup>
<TypeScriptCompile Include="$(ProjectDir)\**\*.ts" />
</ItemGroup>
<Target Name="TypeScriptCompile" BeforeTargets="Build">
<Message Text="Compiling TypeScript files" />
<Exec Command=""$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.0.0\tsc" -target ES5 @(TypeScriptCompile ->'"%(fullpath)"', ' ')" />
</Target>
msbuild ターゲット ファイルをプロジェクトに追加する nuget パッケージをまとめました。tsc コンパイラが実行され、その出力がクリーンアップされるため、Visual Studio でエラーをダブルクリックしてファイル/行/列にジャンプできるようになります。
https://www.nuget.org/packages/Sholo.TypeScript.Build
tsc でコンパイルしたいものについては、プロパティ ウィンドウのビルド アクションを「TypeScriptCompile」に設定する必要があります。数日間 TypeScript をいじってみたところ、参照を行っている .ts ファイルは TypeScriptCompile に設定する必要がありますが、参照のみを行っているファイルは ymmv に設定する必要があることがわかりました。また、すべてのファイルを表示して、元の .js ファイルを追加する必要がある場合があります。関連する .ts/.js/.d.ts ファイルをグループ化したい場合は、VsCommands 拡張子を見てください。NetDemon/同様の拡張機能を使用すると、ワークフローも非常に優れています。
アップデート:
インストールするだけ ウェブ エッセンシャル 2012 このプラグインを使用すると、.js と .min.js の両方で保存時に自動コンパイルが行われ、TypeScript コードの横に JavaScript 出力を表示するきれいな分割ビューが表示されます。
これは私が使用してきた大雑把な方法です:
プロジェクトを右クリック > プロパティ > ビルド イベント
[PreBuild] ボックスにこれを貼り付けます (プロジェクト内のすべての .ts ファイルを再帰的にビルドします)。
forfiles /S /P $(ProjectDir) /m *.ts /c "cmd /c tsc @file"
特定のエントリ ファイルを構築する場合:
tsc $(ProjectDir)MyScripts/myfile.ts
もっと良い方法があると確信しています。
を使用している場合は、 Microsoft ASP.NET Web 最適化フレームワーク (別名バンドルと縮小化)、次に、 バンドル変圧器 モジュールがインストールされている状態 BundleTransformer.TypeScript. 。TypeScript コードを JS にコンパイルすることに加えて、Bundle Transformer の他のモジュールを使用して、生成された JS コードの縮小を生成することもできます。 BundleTransformer.MicrosoftAjax, BundleTransformer.Yui, BundleTransformer.Closure, BundleTransformer.JsMin, BundleTransformer.UglifyJs そして BundleTransformer.Packer.