前言

在.NET Core中運(yùn)行JavaScript代碼，目前已經(jīng)有很多實(shí)現(xiàn)方案。

但是，如果你希望在純JavaScript環(huán)境中運(yùn)行.NET Core代碼呢？

那么，DotNetJS可能對你有所幫助。

DotNetJS

DotNetJS可以將C#項(xiàng)目編譯為與任何環(huán)境兼容的單文件JavaScript庫，無論是Web瀏覽器，Node.js還是自定義限制空間，如VS Code的Web擴(kuò)展，都可以正常使用它。

該解決方案基于兩個主要組件：

JavaScript/dotnet-runtime（npm） 使用已編譯的C#程序集和.NET運(yùn)行時WebAssembly模塊，以在JavaScript中提供C# 操作性層。該庫與環(huán)境無關(guān) - 它不依賴于特定于平臺的API，如瀏覽器DOM或節(jié)點(diǎn)模塊，并且可以作為CommonJS或ECMAScript模塊導(dǎo)入，也可以通過瀏覽器中的腳本標(biāo)記使用。
DotNet/dotNetJS（NuGet） 在C#中提供JavaScript互操作性層，并通過MSBuild任務(wù)將項(xiàng)目輸出打包到單文件JavaScript庫中。生成的庫包含使用項(xiàng)目程序集初始化的dotnet運(yùn)行時，并準(zhǔn)備用作打包的C#項(xiàng)目的互操作性層。

Demo

1. 創(chuàng)建項(xiàng)目

使用VS2022創(chuàng)建一個控制臺項(xiàng)目，修改項(xiàng)目文件，文件內(nèi)容如下：

"Microsoft.NET.Sdk.BlazorWebAssembly">

?
??net6.0
??true
??true
?

?
??"DotNetJS"?Version="0.4.0"?/>
?

指定SDK為Microsoft.NET.Sdk.BlazorWebAssembly
引用DotNetJS Nuget包

2. 實(shí)現(xiàn)C#代碼

實(shí)現(xiàn)Program.cs，代碼如下：



using?DotNetJS;
using?Microsoft.JSInterop;
using?System;
using?System.Threading.Tasks;

namespace?HelloDotnetJS;

public?partial?class?Program
{?
????public?static?void?Main()
????{
????????Console.WriteLine($"HelloDotnetJS?初始化!");
????}

????[JSFunction]??
????public?static?partial?string?GetBaseAddress();

????[JSInvokable]
????public?async?static?Task?Demo()
????{
????????var?uri?=?new?Uri(GetBaseAddress());
????????Console.WriteLine(uri);

????????var?json?=?await?new?System.Net.Http.HttpClient?{?BaseAddress?=?uri?}
????????????.GetStringAsync("weather.json");

????????var?forecasts?=?Newtonsoft.Json.JsonConvert.DeserializeObject(json);

????????return?forecasts;
????}
}

Demo方法的具體邏輯如下：

獲取網(wǎng)站根路徑，使用[JSFunction]指定具體值來源于JS傳入；
訪問網(wǎng)站根路徑下的weather.json文件
反序列化json，調(diào)用Newtonsoft驗(yàn)證第三方庫能否正常使用；
返回WeatherForecast集合

在終端窗口執(zhí)行dotnet publish，上述代碼將會編譯成JS代碼文件dotnet.js。

3. 實(shí)現(xiàn)JS代碼

創(chuàng)建demo.html，代碼如下：

"UTF-8">

4. 運(yùn)行效果

將所有文件部署到網(wǎng)站上，例如http://localhost:5678/：?

weather.json的文件內(nèi)容如下：

[
??{
????"date":?"2018-05-06",
????"temperatureC":?1,
????"summary":?"My?IO"
??},
??{
????"date":?"2018-05-07",
????"temperatureC":?14,
????"summary":?"Bracing"
??}
]

用瀏覽器訪問http://localhost:5678/demo.html，在控制臺窗口可以看到代碼運(yùn)行正常：?

結(jié)論

DotNetJS目前還不完善，生成的JS代碼文件dotnet.js尺寸較大，demo代碼就有11M。

如何在JavaScript中運(yùn)行.NET Core代碼

前言