Blazor WebAssembly 候選版遷移手記

coredx發表於2020-05-26

前言

       之前我寫過一篇關於 Blazor WebAssembly 的文章瀏覽器中的 .Net Core —— Blazor WebAssembly 初體驗,如今已經更新到 RC-1,與預覽版有著較大的差異,為此補充這篇文章。

正文

與預覽版的主要差異

       1、這次的候選版修改了大部分包名和名稱空間,因此無法通過更新包完成升級。你會發現老包一直停留在預覽版。因此需要刪除棄用的包,安裝新的包。

       2、Startup 的配置方式發生了較大變化,弱化了 Blazor 的存在感。

       3、這次更新後支援在 VS 2019 除錯 Blazor WebAssembly 了。當然也可以使用瀏覽器進行除錯,效果一樣。但是瀏覽器除錯同樣依賴 Blazor 遠端除錯代理,所以還不如直接使用 VS 除錯。要求 VS 2019 16.6.0 以上版本,並進行相應配置。

       4、候選版會將 Blazor 客戶端的所有檔案釋出到宿主專案的 wwwroot 資料夾,而預覽版會在宿主專案的根目錄生成一個與客戶端專案同名的資料夾存放釋出檔案。因此需要特別注意宿主專案和客戶端專案的 wwwroot 資料夾不能有重名檔案。

       5、候選版釋出時會同時生成 gzip 和 br 格式的預壓縮檔案,壓縮效果較好,一般能壓縮到原始 dll 的 1/4 大小。釋出時會自動使用 IL Linker 裁剪 dll,如果使用了反射程式碼,可能導致執行異常,需要編寫配置檔案配置 Linker 的行為或禁用裁剪。如果 Linker 直接報錯建議禁用。

 

遷移步驟

       1、如果之前安裝過預覽版的請參考微軟官方文件更新專案模板。避免新建專案停留在老版本要手動升級。

       2、更新 VS 2019 到 16.6.0 以上版本。

       3、在客戶端和宿主服務端專案的 launchSettings.json 中增加配置項:"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", ,啟用 VS 除錯。

       4、更新客戶端專案檔案,包括包引用和 Linker 配置。

       5、更新宿主專案檔案。

       6、修改宿主專案的 Startup.cs 檔案

       注意:上圖的新的註冊程式碼推薦和 app.UseStaticFiles(); 放到一起。

       上圖為路由端點註冊。

       以上修改全部在 Configure 方法中完成。

       7、修復名稱空間引用和其他可自動修復的小編譯錯誤。

       至此,就完成了從預覽版到候選版的遷移。在我的專案中,由於新版的釋出機制,將 index.html 也一併移到 wwwroot/blazor 資料夾中,避免引起歧義。

 

注意事項

       HttpClient 的使用方式有變更,引用的包也有區別,GetJsonAsync 換成了 GetFromJsonAsync。

 

除錯體驗

       按照一般流程啟動宿主專案就可以除錯客戶端程式碼了,感覺和除錯一般 C# 程式沒有任何區別。如果想在瀏覽器進行除錯,同樣要除錯啟動宿主專案,因為需要藉助遠端除錯代理才能正常工作。需要確保 app.UseWebAssemblyDebugging(); 這句程式碼已經加入 Configure 方法,然後 F12 開啟控制檯,按照提示按組合鍵啟動除錯頁面。除錯頁面會顯示一個命令,將上述命令用 cmd 或 Win+R 執行就可以在新視窗開啟除錯頁面。注意,新開啟的頁面無法觸發 VS 的斷點,只能觸發瀏覽器中的斷點。變數監控什麼的也都能用,不過感覺也就圖個新鮮,實際上也不怎麼好用,需要開啟兩個標籤,一個用來操作,一個用原來除錯原始碼,感覺在脫褲子放屁。

       注意,需要最低 Chrome 70 或 Edge 80 才能用瀏覽器除錯功能。

 

結語

       這次更新保持了微軟改名部的一貫風格和強大友好的一條龍開發服務體驗,用起來還是很舒服的。

 

       轉載請完整保留以下內容並在顯眼位置標註,未經授權刪除以下內容進行轉載盜用的,保留追究法律責任的權利!

  本文地址:https://www.cnblogs.com/coredx/p/12966150.html

  完整原始碼:Github

  裡面有各種小東西,這只是其中之一,不嫌棄的話可以Star一下。

相關文章