Blazor 服务器端是否有任何热重载?

Is there any hot reload for blazor server-side?

我只有一个简单的问题。 有没有办法热重载 blazor 应用程序?至少,.razor 文件? 现在我在本地 IIS(不是 IIS Express)上托管我的应用程序。

我正在上网查找,但没有找到任何有用的信息。

谢谢大家的回复:)

也许您可以在命令提示符下尝试 运行 您的应用程序:

dotnet watch run debug

2021-11-10 更新:

随着 Visual Studio 2022 发布 2021-11-08 热重载现在开箱即用。将您的项目升级到 .NET 6 以获得最佳体验。

https://docs.microsoft.com/en-us/visualstudio/releases/2022/release-notes#NET-HotReload-170

2021-04-09 更新:

.NET 6 Preview 3

的初始 .NET 热重载支持

将“hotReloadProfile”:“aspnetcore”属性 添加到 launchSettings.json 中的启动配置文件。对于 Blazor WebAssembly 项目,请使用“blazorwasm”热重载配置文件。

运行 项目使用 dotnet watch.

您可以在 docs 中找到支持的代码编辑列表。

https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-6-preview-3/#initial-net-hot-reload-support

感谢@Quango 指出。

2020-04-09 更新:

我没有使用 browser-sync,而是在 <script src="_framework/blazor.server.js"></script>

下的 _Host.cshtml 中添加了以下代码
<environment include="Development">
    <script>
        window.Blazor.defaultReconnectionHandler.onConnectionDown = function () {
            setTimeout(function () {
                location.reload();
            }, 7000);
        }
    </script>
</environment>

不是最佳的,但它工作得更好,因为你需要一个更少的 HTTP 服务器。如果您仍然希望看到消息 Attempting to reconnect to the server...Could not reconnect to the server. Reload the page to restore functionality..

,也可以使用 _reconnectCallback
window.Blazor.defaultReconnectionHandler._reconnectCallback = function (d) {
    document.location.reload();
}

https://thijstijsma.nl/2020/02/18/blazor-server-hot-reload/

原文:

计划为 .NET 5 热重载,根据正在从事 Blazor 项目的@danroth27,计划于 2020 年 11 月进行。

https://github.com/dotnet/aspnetcore/issues/5456#issuecomment-584219488

正如@MauricioAtanache 所说,您可以使用 dotnet watch,但不要忘记添加要监视的文件。示例:

dotnet watch --project BlazorTest.Server run

BlazorTest.Server.csproj 文件:

<ItemGroup>
    <Watch Include="..\**\*.razor" />
    <Watch Include="..\**\*.scss" />
    <Watch Include="..\**\*.cs" />
</ItemGroup>

然而,这不是 true 热重载,因为它会重新启动服务器,但您必须在浏览器中进行手动刷新。如果添加新文件,您还需要在重新加载之前编辑现有文件。

为了解决这个问题,我喜欢使用 browser-sync 设置为您的网络应用程序的代理。

示例:

browser-sync start --proxy https://localhost:5001/ --files '**/*.razor,**/*.cshtml, **/*.css, **/*.js, **/*.htm*'

https://weblog.west-wind.com/posts/2019/May/18/Live-Reloading-Server-Side-ASPNET-Core-Apps

@martasp 在 Github 上还有一个名为 BlazorLiveReload 的项目,它可以在不刷新页面的情况下处理 Blazor Live Reload。

来自作者:

It uses razor engine version 3 to compile components to c# classes. Then using Roslyn compiler I compiled down those classes to assembly. Finally, I loaded the app.razor component from an assembly with reflection and with Steve Sanderson Test host modified library I turned component to plain HTML. To serve HTML files in realtime I used WebSockets to have a full-duplex communication.

我自己没有测试过这个项目,所以我不能说它的效果如何。

https://github.com/martasp/BlazorLiveReload

关于该问题的一般线程:

https://github.com/dotnet/aspnetcore/issues/5456

LiveSharp 现在支持有状态的 Blazor 热重载 (https://www.livesharp.net)

你可以看到它在这里工作:https://www.youtube.com/watch?v=MCh5-44UBpM

LiveSharp 是一种商业工具,可让您在运行时更新 C# 代码。

免责声明:我是作者

添加

<ItemGroup>
    <Watch Include="..\**\*.razor" />
    <Watch Include="..\**\*.scss" />
    <Watch Include="..\**\*.cs" />
</ItemGroup>

到您的 .csproj 然后 运行:

dotnet watch run debug

这不是您可能期望的热重载,但它会自动执行重新 运行 过程。您只需等待几秒钟,然后重新加载页面。

只需使用 CTRL + F5 启动项目(不附加调试器),进行更改并重新加载页面。

Thijs Tijsma 有一个 post 对我有用。

你必须 运行 在 Visual Studio 中没有附加调试器(CTRL + F5 在 Visual Studio)

Pages\_host.cshtml中添加

<script src="_framework/blazor.server.js"></script>

<!-- Make sure you place it after the include for blazor.server.js -->

<environment include="Development">
    <script src="~/Scripts/HotReload.js"></script>
</environment>

然后重新加载 js 文件 wwwroot\scripts\HotReload.js

window.Blazor.defaultReconnectionHandler.onConnectionDown = function ()
{
    window.location.reload();
};

有疼痛史

目前还没有真正好的解决方案可以自动重新编译更改的部分并尽可能节省时间,例如编辑并继续.另一个可悲的事实是 there is an open issue about it since 2018 (!). They promise to finally fix this with .NET 6. We'll see if this is worth more, cause after pressure of the community, they already promised a solution in the beginning of 2020 for .NET 5. About 6 months later, they had to tell that they couldn't make it to release after all for v5.

使用 调试 解决方法

什么不起作用

运行 dotnet watch run 是个好东西,但是当你想使用调试器时,它就达到了它的局限性。即使使用 dotnet watch run debug,我也无法将 Visual Studio 附加到进程,因此它会到达断点。我还尝试让 VS 运行 dotnet watch run debuglaunchSettings.json 中使用以下配置文件条目:

"WatchDebug": {
  "commandName": "Executable",
  "executablePath": "dotnet.exe",
  "commandLineArgs": "watch run debug",
  "workingDirectory": "$(ProjectDir)",
  "launchBrowser": false,
  "environmentVariables": {
    "ASPNETCORE_ENVIRONMENT": "Development"
  }
}

进程启动并在文件更改后重新启动,但没有命中断点。也不适用于 dotnet run -c debug.

Then I found a setting in VS which looks good,但没有效果,甚至在使用 IIS Express 时也没有效果:

我发现的唯一解决方法是调试

_Host.cshtml

中注入您的配置
@inject IWebHostEnvironment env

并在blazor.server.js

后添加如下调用
@if (env.EnvironmentName != "Production") {
    <script>
        window.Blazor.defaultReconnectionHandler.onConnectionDown = function () {
            console.log('reloading')
            window.location.reload();
        };
    </script>
}

现在在 launchSettings.json 中创建一个调试配置,而无需 启动浏览器,因为这会让您在 上每次单击要测试的页面 改变,我们希望避免:

"MyProjectWithoutBrowser": {
  "commandName": "Project",
  "environmentVariables": {
    "ASPNETCORE_ENVIRONMENT": "Development"
  },
  "dotnetRunMessages": "true",
  "applicationUrl": "http://localhost:5000"
}

确保环境变量在开发期间仅设置为 Debug,否则设置为 Production。在给定 Url 上打开浏览器。如果您选择该配置并应用更改,请按 [Ctrl] + [Shift] + [F5]。这将重新启动调试器,然后浏览器重新连接,您会看到更改。在 hello world Blazor Server 应用程序上,这大约需要 3-4 秒。

使用 dotnet 6.0
Tasks.json 添加一个新的部分,如下所示,并调用它,例如 watch运行Build
(它是 build 的副本,但我添加了 watch运行args 的参数,像这样:

  {
        "label": "watchRunBuild",
        "command": "dotnet",
        "type": "process",
        "args": [
            "watch",
            "run",
            "build",
            "${workspaceFolder}/BlazorTest.csproj",
            "/property:GenerateFullPaths=true",
            "/consoleloggerparameters:NoSummary"
        ],
        "problemMatcher": "$msCompile"
    }

并且在 launch.json
像这样将 preLaunchTask 更改为 watch运行Build :

 "preLaunchTask": "watchRunBuild"