将类库 (.net) 的 Javascript 文件链接到 Blazor 应用程序答案

【问题标题】：Link Javascript file of a Class Library (.net) to blazor app将类库 (.net) 的 Javascript 文件链接到 Blazor 应用程序
【发布时间】：2020-06-15 21:29:35
【问题描述】：

我目前正在研究由两个项目组成的 VS 2019 解决方案：一个是包含 Javascript 文件的类库，另一个是 Blazor .Net Core 项目（客户端）。

我希望将我的类库中的脚本引用到我的 blazor 应用程序，以便从客户端调用它的函数。

我知道我可以简单地将文件直接添加到 blazor 项目中，但我正在寻找其他方法来实现 Js 文件，特别是来自 .Net 类库。

【问题讨论】：

这个问题有点令人困惑。用 .NET 术语来说，类库是一个 DLL，它具有可供其他 .NET 程序集使用的编译代码。 JavaScript 文件是包含需要由 JavaScript 引擎解析和解释的代码的文本文件。两个不同的想法。从理论上讲，您可以将 JavaScript 文件作为资源嵌入到 .NET DLL 中，将其加载到 Blazor 中，然后将其公开给浏览器进行解析和解释，但是当您可以仅链接到该文件时，这会带来很多工作和复杂性在您的 Blazor 应用中...
我希望用我的 javascript 文件创建一个项目，以便网络应用可以引用，如 jquery 或 bootstrap。
尝试在 Visual Studio 中使用模板 Razor Class Library 创建项目。它将使用包含的 javascript 文件创建一个示例项目，其中包含一个 JavaScript 互操作示例。
@hultqvist 描述 Blazor 的当前状态有什么误导性？或者浏览器如何解释 JavaScript？此外，给定的答案正是我在评论中描述的。
@HereticMonkey 糟糕，我在考虑static assets in razor components，但我现在看到这是在您最初发表评论后发布的。

标签： javascript .net blazor

【解决方案1】：

最简单的方法是像你说的那样将 js 文件添加到 Blazor 项目中。对于更易于维护的解决方案，请考虑创建一个 Razor 类库（“RCL”）而不是 .Net 类库，因为它支持引用静态资产（参见this article，更具体地说是here获取说明）。

还有一种更复杂的方法可以从 .Net 库的资源文件中“流式传输”您的 js 文件。优点是普通的 .Net 标准类库就可以了，而且您不需要使用 script 标记来引用脚本。您可以通过将 js 文件作为嵌入式资源引用来实现这一点（在 .Net 类库的 .csproj 中）：

  <ItemGroup>
    <EmbeddedResource Include="wwwroot\script\MyJs.js" 
                      LogicalName="blazor:js:%(RecursiveDir)%(Filename)%(Extension)" />
  </ItemGroup>

然后使用 eval 调用带有文件内容的 js：

// Get contents of resource
string scriptContent;
using (var stream = this.GetType().Assembly.GetManifestResourceStream("blazor:js:MyJs.js"))
{
  using (var sr = new StreamReader(stream))
  {
    scriptContent = await sr.ReadToEndAsync();
  }
}

JSRuntime.InvokeAsync<T>("eval", scriptContent)

最后一个策略here（和here）的完整示例（免责声明：我是维护者）。

【讨论】：