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 调试。

Blazor WebAssembly 候选版迁移手记

       4、更新客户端项目文件,包括包引用和 Linker 配置。

Blazor WebAssembly 候选版迁移手记

Blazor WebAssembly 候选版迁移手记

       5、更新宿主项目文件。

Blazor WebAssembly 候选版迁移手记

       6、修改宿主项目的 Startup.cs 文件

Blazor WebAssembly 候选版迁移手记

Blazor WebAssembly 候选版迁移手记

       注意:上图的新的注册代码推荐和 app.UseStaticFiles(); 放到一起。

Blazor WebAssembly 候选版迁移手记

       上图为路由端点注册。

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

       7、修复命名空间引用和其他可自动修复的小编译错误。

       至此,就完成了从预览版到候选版的迁移。在我的项目中,由于新版的发布机制,将 index.html 也一并移到 wwwroot/blazor 文件夹中,避免引起歧义。

 

注意事项

       HttpClient 的使用方式有变更,引用的包也有区别,GetJsonAsync 换成了 GetFromJsonAsync。

 

调试体验

       按照一般流程启动宿主项目就可以调试客户端代码了,感觉和调试一般 C# 程序没有任何区别。如果想在浏览器进行调试,同样要调试启动宿主项目,因为需要借助远程调试代理才能正常工作。需要确保 app.UseWebAssemblyDebugging(); 这句代码已经加入 Configure 方法,然后 F12 打开控制台,按照提示按组合键启动调试页面。调试页面会显示一个命令,将上述命令用 cmd 或 Win+R 执行就可以在新窗口打开调试页面。注意,新打开的页面无法触发 VS 的断点,只能触发浏览器中的断点。变量监控什么的也都能用,不过感觉也就图个新鲜,实际上也不怎么好用,需要打开两个标签,一个用来操作,一个用原来调试源码,感觉在脱裤子放屁。

       注意,需要最低 Chrome 70 或 Edge 80 才能用浏览器调试功能。

 

结语

       这次更新保持了微软改名部的一贯风格和强大友好的一条龙开发服务体验,用起来还是很舒服的。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpyypy.html