【译】使用Blazor构建桌面应用

随着最近.NET Core 3的正式发布，我认为我会尝试一个有趣的小实验。我喜欢使用Electron来创建基于Web的桌面应用程序。我想了解有关Blazor（ASP.NET系列的最新成员）的更多信息。在这篇文章中，我将向您确切演示如何在15分钟内开始使用Blazor和Electron！

• .NET Core 3.0 SDK

• Node.js with npm
  

  
  

确保同时安装 .NET Core SDK 和 Node.js（您可以使用 dotnet--version和 node--version检查版本）。我们需要.NET Core 3.0，因为我们将使用dotnet new搭建Blazor应用程序。我们还需要Electron.NET的.NET Core 3.0，该库允许Electron和.NET集成。Node.js用于下载，配置实际的Electron实例并与之集成。

安装程序需要一些简单的步骤。尽管大多数步骤只是命令，但是有2个文件需要手动编辑。设置完项目后，只需要一个命令就可以启动它！

mkdir blazor-electron-demo
cd blazor-electron-demo
dotnet new blazorserver --no-https
dotnet add package ElectronNET.API
dotnet new tool-manifest
dotnet tool install ElectronNET.CLI
dotnet electronize init

相当多的命令块，但是它们都很简单，不需要任何用户交互。让我们细分每个命令的作用：

所有命令应按顺序执行，并且一次执行一个。一旦它们全部完成，您仅需更改两个文件即可运行该应用程序！

为了使ASP.NET应用程序（在本例中为Blazor应用程序）与Electron集成，我们需要对 Program.cs和 Startup.cs进行修改。在 Program.cs中：

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.Hosting;
using Microsoft.Extensions.Logging;
using ElectronNET.API; // ADD THIS!

namespace blazor_electron_demo
{
    public class Program
    {
        public static void Main(string[] args)
        {
            CreateHostBuilder(args).Build().Run();
        }

        public static IHostBuilder CreateHostBuilder(string[] args) =>
            Host.CreateDefaultBuilder(args)
                .ConfigureWebHostDefaults(webBuilder =>
                {
                    webBuilder.UseStartup<Startup>()
                              .UseElectron(args);  // ADD THIS!
                });
    }
}

在 Startup.cs中：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using blazor_electron_demo.Data;
using ElectronNET.API; // ADD THIS!

namespace blazor_electron_demo
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddRazorPages();
            services.AddServerSideBlazor();
            services.AddSingleton<WeatherForecastService>();
        }

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment()) {
                app.UseDeveloperExceptionPage();
            } else {
                app.UseExceptionHandler("/Error");
            }

            app.UseStaticFiles();
            app.UseRouting();
            app.UseEndpoints(endpoints =>
            {
                endpoints.MapBlazorHub();
                endpoints.MapFallbackToPage("/_Host");
            });

            // ADD THIS!
            Task.Run(async () => await Electron.WindowManager.CreateWindowAsync());
        }
    }
}

随着这两个文件的更新，我们现在可以在Electron内运行我们的应用程序了！

我们的应用程序可以两种不同的方式运行。通过命令行或通过Visual Studio的“运行”对话框（通过在使用dotnet electroize init的安装过程中添加的启动配置文件）进行。

dotnet electronize start

Blazor在桌面应用程序中运行

运行后，您可以从Visual Studio的“调试”>“附加到进程...”中附加调试器，并按项目名称进行过滤。运行.NET应用程序时，断点将完全按预期工作。您甚至可以调试Razor文件中的代码！唯一的缺点是，当您需要进行更改时，必须停止应用程序，编辑更改并重新启动它。我们稍后再讨论。

感谢Electron.NET，我们可以通过一个命令将应用程序发布到特定于平台的安装程序中！

dotnet electronize build /target win
# OR
dotnet electronize build /target osx
# OR
dotnet electronize build /target linux

Windows Note: 我确实遇到了一个例外 Thegiven key'target'wasnotpresentinthe dictionary.在 mingw64提示符下运行命令时。使用本机 cmd或 powershell提示符再次尝试命令。

此命令将在./bin/desktop文件夹下创建一个新的安装程序。在内部，您将找到适合您平台的安装程序！

我创建了一个GitHub存储库，展示了我们刚刚进行的所有更改。如果遇到问题，请使用它作为资源，或者在Twitter上与我联系！

虽然这两种技术的结合很有趣，但确实有其缺点。从开发人员工作流问题到API不匹配，这些问题可能很烦人，但对于使用Blazor和Electron而言，它们决不是交易障碍。

最严重的问题是迭代开发过程缓慢。此时，开发人员的工作流程包括启动应用程序，手动附加调试器，测试应用程序，然后停止应用程序进行更改并最终重新启动周期。如果没有更改后的热重载功能，这将大大增加开发难度。Electron.NET的维护者建议在浏览器中开发该应用程序以完成大部分任务，并且仅切换到electronic进行定期测试。

Electron.NET很年轻，但是功能全面。创建从C＃和.NET到JavaScript＆Node.js / Electron的功能桥梁并非易事。但是您很有可能会发现未实现的方法或事件。请记住，Electron.NET是人们在业余时间创建的免费库。每个功能可能都不存在，但这就是开源的光芒所在。如果您在API或功能中发现了一个漏洞，需要进行一些工作，那么请分叉该项目并尝试自己找到修复程序。大多数时候，构建软件是协作的成果，帮助解决问题而不是仅仅等待解决问题会非常有意义。

我们创建了一个全新的Blazor项目，借助Electron.NET增加了对Electron的支持，并创建了一个准备发布的安装程序！尽管在使用开发堆栈进行这种尖端构建时确实存在一些警告，但绝对没有阻止您使用Blazor构建不可思议的桌面应用程序的警告。在像您这样的开发人员的帮助下，Electron.NET将继续改进！

特别向Rob Horner和John Sedlak表示感谢，感谢他帮助编辑本文！谢谢罗伯和约翰！

与往常一样，如果您喜欢这篇文章，请在Twitter上告诉我！如果您有任何问题或不了解某些内容，也请告诉我！我非常感谢您的反馈！