既存の Asp.Net MVC プロジェクトに typescript を追加するにはどうすればよいですか?[重複]

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

  •  12-12-2019
  •  | 
  •  

質問

私は typescript の背後にあるアイデアが大好きですが、それを ASP.Net MVC プロジェクトに組み込む方法がわかりません。Visual Studio 拡張機能はすでにインストールされていますが、追加方法の例やドキュメントが見つからないようです。 *.ts コンパイルされるファイル *.js ファイル。

編集：実際、Win8 の例の方法を複製する必要がありますか? .jsproj インクルードとハンドル .ts ファイル？それとも、HTML/JS Win8 プロジェクトでのみ機能しますか?

役に立ちましたか？

解決

警告： Typescript と MVC の両方がこの回答以来大幅に変更されたため、この回答はかなり古いものになっています。後でアップデートしてみます。- リッチコーダー

おかげで ソニー 答えのために。

[追加] > [新しい項目] ダイアログを使用して、TypeScript ファイルを既存のプロジェクトに追加できます。exampleImage「Typescript ファイル」項目は Web グループの下にはなく、その親 (この場合は Visual C#) の下にあることに注意してください。

これにより TypeScript ファイルが追加され、残りは Visual Studio が実行します。

次に、次の行をプロジェクト ファイルに追加する必要があります。

 <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>

私にとっては完璧に機能しましたが、何か問題が発生した場合はコメントしてください。

他のヒント

それは正しいです。必要なのは、.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="&quot;$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.0.0\tsc&quot; -target ES5 @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" />
</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/同様の拡張機能を使用すると、ワークフローも非常に優れています。

使用している場合 バンドルと縮小化, TypeScript を Javascript にコンパイルする IBundleTransform の実装をリリースしました。オンです GitHub NuGet (パッケージの TypeScriptBundleTransform のインストール)。Bundling と Minification をまだ使用していない場合は、一見の価値があります。

アップデート：

インストールするだけ ウェブ エッセンシャル 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.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top