如何不使用Blazor Web组件从JavaScript调用C# WebAssembly的最小配置

不需要引入完整Blazor框架，直接使用.NET官方提供的WASM运行时和JS互操作能力即可，最小配置步骤如下：

环境准备 #

• 安装.NET 7 或更高版本SDK
• 安装WASM编译依赖工作负载，执行命令：
  dotnet workload install wasm-tools

项目配置 #

新建C#类库项目，修改.csproj文件为以下最小配置：

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <TargetFramework>net7.0</TargetFramework>
    <!-- 指定运行时为浏览器WASM -->
    <RuntimeIdentifier>browser-wasm</RuntimeIdentifier>
    <!-- 绑定JS入口文件 -->
    <WasmMainJSPath>main.js</WasmMainJSPath>
    <OutputType>Exe</OutputType>
    <!-- 以下配置用于裁剪冗余体积 -->
    <InvariantGlobalization>true</InvariantGlobalization>
  </PropertyGroup>
</Project>

C#侧导出方法 #

需要暴露给JS调用的静态方法添加[JSExport]特性即可：

using System.Runtime.InteropServices.JavaScript;

public partial class Calculator
{
    [JSExport]
    public static int Add(int a, int b)
    {
        return a + b;
    }
}

JS侧调用逻辑 #

在项目根目录新建main.js文件，初始化WASM运行时后即可调用导出的C#方法：

import { dotnet } from './dotnet.js'

// 初始化.NET运行时
const runtime = await dotnet.create();
// 获取当前程序集的导出方法
const exports = await runtime.getAssemblyExports(runtime.getConfig().mainAssemblyName);

// 直接调用C#导出的Add方法
const result = exports.Calculator.Add(2, 3);
console.log(result); // 输出5

编译与使用 #

执行发布命令编译产物：
dotnet publish -c Release
编译完成后所有可用的运行时产物都在bin/Release/net7.0/browser-wasm/publish/wwwroot目录下，直接部署该目录的文件即可使用，最小产物体积可控制在1MB以内。

可选优化 #

如果需要进一步压缩体积，可在.csproj中添加以下配置开启Native AOT编译，最终体积可降至数百KB：

<PropertyGroup>
  <WasmBuildNative>true</WasmBuildNative>
  <TrimMode>full</TrimMode>
</PropertyGroup>

内容的提问来源于stack exchange，提问作者Elringus