如何使用c# webassembly从JavaScript没有Blazor web组件

Question

要将c#编译成WebAssembly并与JS互操作，需要使用Blazor WebAssembly ASP。. NET框架，它是为SPA设计的，如果你只是想从JS中使用c#库，它会包含很多开销。

从JavaScript编译一个DLL到WebAssembly并使用它的最小设置是什么?

Answer 1

更新:从。net 7开始，用例有第一方支持:https://devblogs.microsoft.com/dotnet/use-net-7-from-any-javascript-app-in-net-7/下面仍然适用于较旧的。net版本，或者如果你想深入挖掘和/或实现自定义互操作层。

---

用以下配置创建一个新的空c#项目(通过.csproj):

<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