一、前言

在.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)容如下：

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
<PropertyGroup>
<TargetFramework>net6.0</TargetFramework>
<EmitSourceMap>true</EmitSourceMap>
<EmitTypes>true</EmitTypes>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="DotNetJS" Version="0.4.0" />
</ItemGroup>
</Project>

• 指定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<WeatherForecast[]> 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<WeatherForecast[]>(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，代碼如下：

<meta charset="UTF-8">
<script src="dotnet.js"></script>
<script>
//定義GetBaseAddress實(shí)現(xiàn)
dotnet.HelloDotnetJS.GetBaseAddress = () => window.location.protocol + "http://" + window.location.host;
window.onload = async function () {
//初始化
await dotnet.boot();
console.log("開始執(zhí)行Demo");
const str = await dotnet.HelloDotnetJS.Demo();
console.log(str);
};
</script>

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。

到此這篇關(guān)于如何在JavaScript中運(yùn)行.NET Core代碼詳情的文章就介紹到這了,更多相關(guān)JavaScript中運(yùn)行.NET Core內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論