Blazor WebAssembly 热重载

Blazor WebAssembly是一个全新的Web前端框架，其特点是使用C#语言编写客户端代码，同时也可以利用开源的.NET Core生态系统进行开发，它的运行环境是浏览器，最大的好处是跨平台和无需安装客户端。

热重载是一个非常实用的调试工具，它能够在运行期间修改应用程序的代码，并立即应用这些修改，极大地提高调试效率。

Blazor WebAssembly 已有的热重载

Blazor WebAssembly 3.2版本以后已经原生支持热重载功能，只要我们修改了代码，即可立即在浏览器中看到修改后的效果，非常方便。

Blazor WebAssembly 没有原生支持的热重载

Blazor WebAssembly 的热重载功能存在一些限制，它不能够热重载编辑器以外的修改，例如CSS和静态文件等修改。此外，我们也无法在浏览器中实时看到WebSocket连接和服务端调试器。

为了解决这些问题，我们可以使用第三方工具来实现热重载，其中一个比较流行的工具是Shell-Bash。

Shell-Bash

Shell-Bash是一个基于Blazor和.NET Core的开源工具，可以在Blazor应用程序中以很高的效率进行热重载。它可以自动侦测文件更改，并在应用程序运行时重新编译和热重载应用程序。

安装

dotnet tool install -g shell-bash

使用

在项目的根目录下，执行以下命令：

shell-bash

这将启动一个 Bash 终端，自动监控文件变化并重新编译应用程序。

与 Visual Studio Code 集成

我们可以通过在 VS Code 中使用 Tasks 和 Launch 来实现与 Shell-Bash 的集成。具体步骤如下：

1. 在项目根目录下创建 .vscode 目录，并在此目录下创建 tasks.json 和 launch.json。
2. 在 tasks.json 中添加以下配置：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "shell-bash",
      "type": "shell",
      "command": "shell-bash",
      "options": {
        "cwd": "${workspaceFolder}"
      },
      "group": "build",
      "presentation": {
        "reveal": "never"
      }
    }
  ]
}

3. 在 launch.json 中添加以下配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "blazorwasm",
      "name": ".NET Core Launch (Blazor WebAssembly) with shell-bash",
      "request": "launch",
      "stopAtEntry": false,
      "preLaunchTask": "shell-bash",
      "program": "${workspaceFolder}/bin/Debug/netstandard2.1/${project}/wwwroot",
      "args": [],
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": null,
      "runtimeArgs": [
        "shell-bash-websocket-for-vscode"
      ],
      "env": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "sourceFileMap": {
        "/Views": "${workspaceFolder}/Views"
      }
    }
  ]
}

热重载示例

使用以上步骤，在 VS Code 中打开你的 Blazor WebAssembly 应用程序，并启动 Shell-Bash 和应用程序。在浏览器中打开应用程序，我们会发现现在我们可以修改.CS文件、CSS文件和静态文件等文件，并立即看到修改后的效果，这是非常方便的。

结论

总之，热重载是一个非常有用的工具，可以提高我们的调试效率。Blazor WebAssembly 3.2版本以后已经原生支持热重载功能，但是存在一些限制。Shell-Bash是一个非常流行的第三方工具，可以使我们更加高效地使用热重载功能。