vs需要迁移_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 调试。

f448ea6976613c9ec41c72d0c829147c.png

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

b32f94517f7c567470bc207580bc2ee4.png

a41467f7ad7d00ef44bfddf2d29d233b.png

       5、更新宿主项目文件。

828dfe18c879ec7d63aaad0b9dd12a09.png

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

11ac5d33563f0596567480f796f6f02b.png

99b5e61c117d3495853b2d49d1950306.png

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

00bf07ec535e5f2df2263d6dc6a989de.png

       上图为路由端点注册。

       以上修改全部在 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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Getting started with WebAssembly & Emscripten March 5, 2019 Video Getting started with WebAssembly & Emscripten English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 2.5 Hours | 687 MB A complete guide for learning the WebAssembly JavaScript API and Emscripten toolset. Learn to create and use WebAssembly Modules from scratch using Emscripten. Bring your skills up to date with the very latest technology in Web Development. This course is suitable for both beginners and experienced developers looking to get started with WebAssembly. Understand what WebAssembly is and how it speeds up the web Use native JavaScript APIs to load and run WebAssembly modules Learn to use Emscripten and compile your own C or C++ code as a WebAssembly module Use WebAssembly in a real-world project and micro benchmark An invaluable skill for any developer looking to future-proof their skills WebAssembly is the most promising new technology for the web, allowing browsers, and other JavaScript environments, to run blazing-fast raw binary modules, compiled directly from C, C++ and many other languages. Understanding WebAssembly is an invaluable skill for anyone working with JavaScript or compiled languages, allowing you to bridge the gap between native software development and web-based JavaScript. This course will provide a very practical and concise approach to learning WebAssembly & Emscripten, and will give you a solid base to immediately start creating and implementing fast, optimised WebAssembly modules. Content and Overview This course aims to teach a solid foundational understanding of what WebAssembly is, and why it’s so powerful. Section one starts with an overview of WebAssembly and a detailed setup lesson to help you follow along every step of the way. Section two covers the native JavaScript browser API for loading and running WebAssembly modules. This section also includes importing and exporting functions to and from a WebAssembly module, and shows how to access WebAssemb

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值