NativeAOT-LLVM是一个实验性的WebAssembly编译器(https://github.com/dotnet/runtimelab/tree/feature/NativeAOT-LLVM),它不是官方的Microsoft WebAssembly编译器,由社区支持,但.Net 6可用。首先,这仅适用于Windows,您需要安装和激活emscripten。我不会在此处涵盖安装emscripten,但您可以阅读https://emscripten.org/docs/getting_started/downloads.html。
要创建和运行dotnet c#库:
- 创建库项目:
dotnet new classlib
- 创建库代码,我们将使用一些简单的东西来避免像JavaScript字符串这样的问题,因此在
Class1.cs
文件中添加以下内容:
[System.Runtime.InteropServices.UnmanagedCallersOnly(EntryPoint = "Answer")]
public static int Answer()
{
return 41;
}
这将创建一个函数Answer
,可以从托管代码之外调用,即从Javascript中调用。
- 添加nuget.config文件。
dotnet new nugetconfig
- 在 nuget.config 文件中添加引用,以允许下载实验性的包。您还可以更改包下载位置,以避免将实验性的包添加到全局 NuGet 位置。您的
nuget.config
应如下所示:
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<config>
<add key="globalPackagesFolder" value=".packages" />
</config>
<packageSources>
<clear />
<add key="dotnet-experimental" value="https://pkgs.dev.azure.com/dnceng/public/_packaging/dotnet-experimental/nuget/v3/index.json" />
<add key="nuget" value="https://api.nuget.org/v3/index.json" />
</packageSources>
</configuration>
- 在项目的
csproj
文件中添加编译器的软件包引用,以使其最终变为以下内容:
<ItemGroup>
<PackageReference Include="Microsoft.DotNet.ILCompiler.LLVM" Version="7.0.0-*" />
<PackageReference Include="runtime.win-x64.Microsoft.DotNet.ILCompiler.LLVM" Version="7.0.0-*" />
</ItemGroup>
</Project>
- 将您的项目发布到wasm(WebAssembly):
dotnet publish /p:NativeLib=Static /p:SelfContained=true -r browser-wasm -c Debug /p:TargetArchitecture=wasm /p:PlatformTarget=AnyCPU /p:MSBuildEnableWorkloadResolver=false /p:EmccExtraArgs="-s EXPORTED_FUNCTIONS=_Answer%2C_NativeAOT_StaticInitialization -s EXPORTED_RUNTIME_METHODS=cwrap" --self-contained
这将使用 browser-wasm 运行时构建项目。MSBuildEnableWorkloadResolver
停止构建过程检查我们这里没有使用的 Mono 的 wasm-tools Visual Studio workload(Mono 是一个不同的编译器和运行时,我相信它正在获得类似于 .NET 7 的支持)。EmccExtraArgs
允许我们向 emscripten 的 emcc
添加参数,我们需要这样做来导出两个函数,我们将从 Javascript 中调用:Answer
- 这是我们的库函数;NativeAOT_StaticInitialization
这在 wasm 模块的生命周期中调用一次,以初始化运行时。请注意名称前面的额外下划线。编译需要一段时间,但完成后,您应该会在子文件夹 bin\x64\Debug\net6.0\browser-wasm\native
中找到 wasm、一些 html 和一些 javascript。在 html 文件结尾之前,在关闭的 body
标签处初始化运行时并调用您的函数:
<script>
Module.onRuntimeInitialized = _ => {
const corertInit = Module.cwrap('NativeAOT_StaticInitialization', 'number', []);
corertInit();
const answer = Module.cwrap('Answer', 'number', []);
console.log(answer());
};
</script>
选择您喜欢的Web服务器进行服务器设置,浏览该页面并检查控制台。如果一切按计划进行且万事俱备(这是实验性质),则应看到以下内容: