استفاده از ویژوال استودیو برای ساخت یک HTA (یا برنامه تکصفحهای HTML محلی) با تایپاسکریپت

من یک HTA نسبتاً بزرگ دارم که هنوز نیاز به نگهداری آن دارم. من در ابتدا آن را با Notepad++ نوشتم، اما به دلیل رشد آن اکنون به قابلیتهای Intellisense که توسط TypeScript ارائه میشود علاقهمند شدهام. همچنین داشتن ابزارهای توسعه HTML و CSS در Visual Studio نیز مفید خواهد بود.

من آگاه هستم که باید توضیحات نوع را به برنامه اضافه کنم، اما هنوز ارزش وقت من را دارد و میتوان آن را به تدریج انجام داد.

استفاده از File -> New Project -> HTML Application with TypeScript یک DLL برای استفاده با IIS Express یا یک سرور وب دیگر تولید میکند. خروجی که من نیاز دارم شامل HTML، CSS و TypeScript است که به جاوااسکریپت کامپایل شدهاند و مراجع در HTML تنظیم شدهاند.

به طور خلاصه، من به موارد زیر نیاز دارم:

  1. تولید فایلهای HTML/CSS به جای یک DLL (پسوند باید به .hta تغییر نام داده شود، اما میتوانم این کار را در یک مرحله پس از ساخت انجام دهم.)
  2. خروجی فایلهای TypeScript به صورت جاوااسکریپت
  3. هوشمندی برای همه فایلهای TypeScript/Javascript موجود در پروژه
  4. اختیاری، اجازه دادن به افزودن کتابخانههای Javascript/TypeScript از طریق Nuget (میتوانم آنها را به صورت دستی اضافه کنم، اما ترجیح میدهم این کار را نکنم).
  5. به صورت اختیاری، اشکالزدایی در Visual Studio (استفاده از کلیدواژه debugger در جاوااسکریپت به من اجازه میدهد یک جلسه اشکالزدایی را با Visual Studio شروع کنم، زمانی که HTA با استفاده از فایل اجرایی mshta.exe شروع شده باشد. با این حال، خوب است که بتوان نقاط توقف را در پنجره ویرایشگر بدون تغییر کد تنظیم کرد.)

چگونه میتوانم از ویژوال استودیو (نسخه حرفهای ۲۰۱۳) برای این سناریو استفاده کنم؟

توجه داشته باشید. من تجربه گستردهای در استفاده از Visual Studio برای برنامههای دسکتاپ (C#/VB.NET و WPF) دارم اما هیچ تجربهای در توسعه وب ندارم. دانش نسبتاً خوبی از HTML، CSS و جاوااسکریپت در محیط HTA دارم.

بهروزرسانی

من سعی کردم یک وبسایت جدید ایجاد کنم (File -> New Web Site ...) اما نمیتوانم فایلهای TypeScript را به سایت اضافه کنم.

پاسخ شماره ۱

من یک پروژه جدید «برنامه HTML با TypeScript» ایجاد کردم. این به من نکات ۱ تا ۴ را میدهد.

من نام "index.html" را در راهحل به "index.hta" تغییر دادم -- نیازی به انجام این کار در پسازساخت نیست. ویژوال استودیو پسوند .hta را به عنوان یک فایل HTML تشخیص میدهد.

من خصوصیات ساخت را تنظیم کردم تا mshta.exe را به عنوان یک برنامه خارجی باز کند، با مسیر کامل HTA به عنوان یک آرگومان خط فرمان. من نتوانستهام پنجره فعلی Visual Studio را به فرآیند HTA متصل کنم (پس هیچ نقطه توقفی وجود ندارد)، اما دستور debugger یک جعبه دیالوگ اشکالزدایی JIT باز میکند و درخواست میکند تا یک جلسه جدید Visual Studio با قابلیتهای کامل اشکالزدایی باز شود.

یک مزیت غیرمنتظره این است که میتوانم فایل TypeScript را اشکالزدایی کنم و محدود به اشکالزدایی جاوااسکریپت تولید شده نیستم.

بهروزرسانی

در حال حاضر، من ترجیح میدهم برای توسعه HTA از Visual Studio Code استفاده کنم؛ در زمانی که به این سؤال پاسخ دادم، VS Code در دسترس نبود. برای این کار، Visual Studio هیچ مزیتی نسبت به VS Code ارائه نمیدهد.

پاسخ شماره ۲

ویاس ۲۰۱۳ بسیار خوب کار میکند. برای ویاس ۲۰۱۳، رانرهای وظیفه Grunt/Gulp وجود دارند، برخی ساخته شده توسط مایکروسافت و برخی دیگر ساخته شده توسط شخص ثالث.

از Grunt یا Gulp به عنوان بخشی از فرایند ساخت خود استفاده کنید. شما میتوانید Grunt و Gulp را به عنوان یک وظیفه ساخت شروع کنید. هر یک از این ابزارهای اجرای وظیفه باید برای فشردهسازی، الحاق و نسخهبندی فایلهای js و استایلها استفاده شوند. حتی میتوان از آنها برای کامپایل Typescript نیز استفاده کرد، اگرچه msbuild در این زمینه عملکرد خوبی دارد.

فایل dll تولید شده توسط Msbuild را نادیده بگیرید. آن را مستقر نکنید. تیمی که من با آن کار میکنم در حال ساخت یک برنامه SPA در VS2013 با تایپاسکریپت است که دوباره ساخته شده و روی لینوکس/آپاش به عنوان دو فایل JS مینیفای شده، یک فایل CSS، برخی داراییهای تصویر و فونت، و یک فایل index.html مستقر میشود.