기존 Asp.Net MVC 프로젝트에 TypeScript를 어떻게 추가합니까?[복제하다]
https://stackoverflow.com//questions/12680486
-
12-12-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
저는 typescript의 아이디어를 좋아하지만 ASP.Net MVC 프로젝트에 이를 포함하는 방법을 알 수 없는 것 같습니다.Visual Studio 확장을 이미 설치했지만 추가 방법에 대한 예제나 문서를 찾을 수 없는 것 같습니다. *.ts 컴파일되는 파일 *.js 파일.
편집하다:실제로 Win8 예제의 방식을 복제해야 할까요? .jsproj 포함 및 처리 .ts 파일?아니면 HTML/JS Win8 프로젝트에서만 작동합니까?
해결책
경고: 이 답변 이후 Typescript와 MVC가 크게 변경되었으므로 이 답변은 이제 상당히 오래된 것입니다.나중에 업데이트를 시도해 보겠습니다.- 리치코더
덕분에 소니 대답을 위해.
추가 > 새 항목 대화 상자를 사용하여 기존 프로젝트에 TypeScript 파일을 추가할 수 있습니다.
'Typescript 파일' 항목은 웹 그룹 아래에 있는 것이 아니라 이 경우 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 예제에서는 $(ProjectDir)***.ts(또는 프로젝트의 모든 .ts 파일)로 정의된 itemGroup TypeScriptCompile에 속하는 모든 파일에서 tsc를 호출하는 beforeBuild 대상을 보여줍니다.
이 패턴을 복제하면 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 대상 파일을 추가하는 너겟 패키지를 함께 던졌습니다.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 웹 최적화 프레임워크 (일명 번들링 및 축소), 그런 다음 번들 변압기 모듈이 설치된 경우 BundleTransformer.TypeScript.TypeScript 코드를 JS로 컴파일하는 것 외에도 번들 변환기의 다른 모듈을 사용하여 생성된 JS 코드를 축소할 수도 있습니다. BundleTransformer.MicrosoftAjax, BundleTransformer.Yui, BundleTransformer.Closure, BundleTransformer.JsMin, BundleTransformer.UglifyJs 그리고 BundleTransformer.Packer.
