如何在没有 Blazor Web 组件的情况下从 JavaScript 使用 C# WebAssemly

Posted 2023-04-12

【中文标题】如何在没有 Blazor Web 组件的情况下从 JavaScript 使用 C# WebAssemly

【英文标题】：How to use C# WebAssemly from JavaScript without Blazor web components

【发布时间】：2021-12-13 00:23:23

【问题描述】：

要将 C# 编译为 WebAssemly 并与 JS 互操作，需要使用 Blazor WebAssembly ASP.NET 框架，该框架专为 SPA 设计，如果您只想使用 JS 中的 C# 库，则会产生大量开销。

将 DLL 编译为 WebAssembly 并从 javascript 中使用它的最低设置是什么？

【参考方案1】：

使用以下配置（通过 .csproj）创建一个新的空 C# 项目：

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">

    <PropertyGroup>
        <TargetFramework>net6.0</TargetFramework>
        <LangVersion>10</LangVersion>
    </PropertyGroup>

    <ItemGroup>
        <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="6.0.0" />
        <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.0" PrivateAssets="all" />
    </ItemGroup>

</Project>

初始化 Blazor JS 运行时并指定绑定：

namespace WasmTest;

public class Program

    private static IJSRuntime js;

    private static async Task Main (string[] args)
    
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        var host = builder.Build();
        js = host.Services.GetRequiredService<IJSRuntime>();
        await host.RunAsync();
    

    [JSInvokable]
    public static async Task<string> BuildMessage (string name)
    
        var time = await GetTimeViaJS();
        return $"Hello name! Current time is time.";
    

    public static async Task<DateTime> GetTimeViaJS ()
    
        return await js.InvokeAsync<DateTime>("getTime");
    

使用dotnet publish 发布并使用来自 JS 的 C# 库：

<script src="_framework/blazor.webassembly.js" autostart="false"></script>

<script>
    window.getTime = () => 
        return new Date().toJSON();
    ;
    window.onload = async function () 
        await Blazor.start();
        const msg = await DotNet.invokeMethodAsync("WasmTest", "BuildMessage", "John");
        console.log(msg);
    ;
</script>

另外，这里有一个解决方案，它允许将 C# 项目编译成单文件 UMD 库，可以在任何 JavaScript 环境中使用：浏览器、节点和自定义受限环境，例如 VS Code 的 Web 扩展：https://github.com/Elringus/DotNetJS