Blazor WebAssembly 候選版遷移手記

前言

       之前我寫過一篇關於 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一下。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章