如何将打字稿添加到现有的Asp.Net MVC项目?
我喜欢typcript背后的想法,但似乎无法弄清楚如何将其包含在ASP.Net MVC项目中。 我已经安装了Visual Studio扩展,但似乎无法find如何添加*.ts
文件编译为*.js
文件的示例或文档。
编辑:其实,我应该复制的Win8例如.jsproj
包括和处理.ts
文件的方式? 或者只能用于HTML / JS Win8项目?
警告:现在这个答案已经过时了,因为从这个答案开始,Typescript和MVC都发生了很大的变化。 我稍后再尝试更新。 – Richcoder
感谢Sohnee的答案。
您可以使用Add> New Item对话框将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>
它对我来说非常合适,但如果遇到任何问题,请发表评论。
那是对的。 所有你需要的是构build.ts文件到.js文件的ms build目标。 Win8示例显示了一个beforeBuild目标,用于调用属于itemGroup TypeScriptCompile(定义为$(ProjectDir)***。ts(或项目中的所有.ts文件))的所有文件的tsc。
复制这个模式应该可以在任何msbuild项目中工作,而不仅仅是Win8项目。
下面是我正在谈论的一个示例:将其添加到任何msbuild项目中,并且在构build开始时应该将任何.ts文件编译到equivialnt .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>
我扔了一个nuget包,将msbuild目标文件添加到您的项目。 它将运行tsc编译器并清理其输出,以便双击Visual Studio中的错误并跳转到文件/行/列。
https://www.nuget.org/packages/Sholo.TypeScript.Build
您需要将“属性”窗口中的“生成操作”设置为“TypeScriptCompile”,以便任何需要tsc编译的操作。 从修改TypeScript的几天后,我发现正在做引用的.ts文件应该被设置为TypeScriptCompile,但是只被引用的文件不应该,而是ymmv。 此外,您可能需要显示所有文件并添加原始.js文件。 如果您想将相关的.ts / .js / .d.ts文件组合在一起,请查看VsCommands扩展。 NetDemon /类似的扩展工作stream也非常好。
如果你正在使用Bundling和Minification ,那么我刚刚发布了一个将TypeScript编译成Javascript的IBundleTransform实现。 它在GitHub和NuGet(Install-Package TypeScriptBundleTransform)上。 如果你还没有使用捆绑和缩小,那么值得一看!
更新:
只需安装Web Essentials 2012插件,您将在保存时自动编译 – 对于.js和.min.js以及整齐的分割视图,可以在TypeScript代码旁边看到JavaScript输出。
这是我一直在使用的粗糙方法:
右键单击您的项目>属性>生成事件
PreBuild框粘贴(recursion地在项目中生成所有的.ts文件):
forfiles /S /P $(ProjectDir) /m *.ts /c "cmd /c tsc @file"
对于build立特定的入口文件:
tsc $(ProjectDir)MyScripts/myfile.ts
我相信有一个更好的方法来做到这一点。
如果您使用的是Microsoft ASP.NET Web Optimization Framework (也称为Bundling and Minification),那么尝试使用Bundle Transformer和已安装的模块BundleTransformer.TypeScript 。 除了将TypeScript代码编译为JS之外,还可以使用Bundle Transformer的其他模块( BundleTransformer.MicrosoftAjax , BundleTransformer.Yui , BundleTransformer.Closure , BundleTransformer.JsMin , BundleTransformer)来生成生成的JS代码的缩小。 UglifyJs和BundleTransformer.Packer 。