Alan Tsai 的學習筆記


學而不思則罔,思而不學則殆,不思不學則“網貸” 記錄軟體開發的點點滴滴 著重於微軟技術、網頁開發、DevOps、C#, Asp .net Mvc、Azure、AI、Chatbot、Docker、Data Science

[打造自己的template-建立一致性程式碼][10]用SideWaffle建立Project Template

[10]用SideWaffle建立Project Template
圖片來源:https://pixabay.com/en/annual-report-book-brochure-686343/

在上一篇([09]內建VSIX的缺點 - SideWaffle基本介紹)介紹完了內建VSIX template在維護上面的不方便和對於SideWaffle做了一個初步的介紹。

在這篇,將會使用SideWaffle來建立Project Template - 看看和內建的做法有何不同。

SideWaffle建立Project Template

在上一篇有提到說其實讓template變得好建立其實是透過套件TemplateBuilder,SideWaffle不是必須要被安裝。

不過有SideWaffle在建立上可以省一點事,所以在接下來這個demo,我們會先切換到Visual Studio(下面簡稱VS) 2015來做這個事情。

接下來的操作步奏如下:

  1. 先安裝SideWaffle到VS 2015
  2. 建立一個VSIX專案
  3. 建立一個要變成template的project
  4. 用SideWaffle的功能建立關聯
  5. 微調設定
  6. 測試

先安裝SideWaffle到VS 2015

首先到VS的Marketplace,找到SideWaffle(下載鏈接),然後安裝到VS 2015。

最後檢查一下,在Tools -> Extensions and Updates裡面看看SideWaffle是否安裝成功。

SideWaffle安裝好
SideWaffle安裝好

建立一個VSIX專案

建立一個新的VSIX專案,這個會作為template安裝的VSIX檔案的來源。

建立出VSIX專案
建立出VSIX專案

建立一個要變成template的project

在同一個Solution裡面,建立要變成Project Template的project。

加入完之後Solution的內容
加入完之後Solution的內容

用SideWaffle的功能建立關聯

VSIX專案右鍵選擇Add -> Add Template Reference (Sidewaffle Project)

建立template reference
建立template reference

下拉選單會出現要變成template的project,確定好之後直接按下ok

image
選擇template的畫面

這個時候VS會開始做一些動作,包括安裝TemplateBuilder,可以看VS的左下角知道他在做什麼。

image
VS訊息

完成之後,會開啟_preprocess.xml的檔案

image
最後完成畫面

微調設定

建立好之後,有兩個設定可以做一下調整:

  1. 讓Project Template設定為不build
  2. 調整_project.vstemplate.xml的檔案
  3. 把_project.vstemplate.xml的檔案Wizard刪掉

讓Project Template設定為不build

因為另外一個project是我們的template,所以他其實不需要build,因此可以設定讓他不build,以減少每次的build時間。

在build configuration那邊可以把Template的build勾選掉。

image
image
勾選掉build,避免花時間

調整_project.vstemplate.xml的檔案

SideWaffle的這個功能其實有個bug,產生出來的_project.vstemplate.xml的檔案有bug,在裡面的Projectelement的File屬性是錯的,改成和project名稱一樣即可。

image
修正錯誤的地方

把_project.vstemplate.xml的檔案Wizard刪掉

還有一個地方也應該拿掉,在_project.vstemplate.xml裡面WizardExtension可以直接拿掉。

那個是SideWaffle template用來記錄template下載次數,但是一般不要整合到SideWaffle的template不需要

image
拿掉的部分

測試

做好了之後,可以直接run起來,然後預設在分類C# -> Web -> SideWaffle裡面。

image
測試template

這個時候,假設我們要調整範本,可以直接在MHAT.ConsoleWithOption這個專案裡面直接加入,不需要在做任何事情,新的修改都會包含在建立出來的template裡面。

是否無法使用VS 2017來建立?

基本上做完上面的流程,用SideWaffle建立Project Template的方式就完成了。

接下來只要對Template專案做任何修改,只要在run就會包含修改內容,不需要額外做任何處理。

但是畢竟目前官方SideWaffle只有支援VS 2015,是否2017就無法做到一樣效果?

其實不然,如果分析一下,就可以發現Add Template Reference在做什麼,基本上修改/新增一些檔案:

  1. 在project template的專案下面增加了檔案
  2. 修改了VSIX專案包含一個特殊的Reference到project template的專案
  3. 在VSIX專案安裝TemplateBuilder

詳細每一個檔案調整什麼可以參考commit:用SideWaffle的Add Template Reference完

在project template的專案下面增加了檔案

總共增加了幾個檔案:

  • \_Definitions\_project.vstemplate.xml
  • \_preprocess.xml
  • \sw-file-icon.png

修改了VSIX專案包含一個特殊的Reference到project template的專案

SideWaffle.csproj(VSIX專案的csproj)加入一個Item Group

<ItemGroup>
 <TemplateReference Include="MHAT.ConsoleWithOption.csproj">
   <PathToProject>../MHAT.ConsoleWithOption/MHAT.ConsoleWithOption.csproj</PathToProject>
 </TemplateReference>
</ItemGroup>

在VSIX專案安裝TemplateBuilder

這個就同等於用nuget安裝TemplateBuilder一樣。

所以其實完全可以用VS 2017建立,然後做上面幾個動作來達到一樣的效果。

結語

在這篇介紹了如何用VS 2015搭配SideWaffle套件來建立一個Project Template。

這種方式建立出來的Project Template有個很強的優勢 - 未來要改template內容,只要用像一般VS開發專案那樣調整project template專案就好。

也分析了到底SideWaffle的動作加了什麼,了解背後原理之後,其實VS 2017也可以做到一樣效果,只是需要手動處理比較麻煩。

不過這些檔案的意義和如何微調SideWaffle將會是下一篇的重點。


如果文章對您有幫助,就請我喝杯飲料吧
街口支付QR Code
街口支付QR Code
台灣 Pay QR Code
台灣 Pay QR Code
Line Pay 一卡通 QR Code
Line Pay 一卡通 QR Code
街口支付QR Code
支付寶QR Code
街口支付QR Code
微信支付QR Code
comments powered by Disqus