【问题标题】：Referencing JavaScript file from a different assembly in a Blazor project从 Blazor 项目中的不同程序集引用 JavaScript 文件
【发布时间】：2020-08-09 08:52:10
【问题描述】：

我有一个 Razor 类库项目，我想在其中添加几个使用 JavaScript 互操作的自定义组件。当我调用 Window 对象中已经存在的函数时，互操作可以正常工作。例如，这可以正常工作：

JSRuntime.InvokeVoidAsync("alert", "Hello world");

但是，当我需要的函数不是 Window 对象的原生函数时，即它们在不同的 interops.js 文件中声明时，我需要在页面 HTML 中添加一个引用所述文件的 <script> 标记。该文件的路径是什么，因为它位于不同的程序集中？

【问题讨论】：

标签： javascript c# razor blazor

【解决方案1】：

有两种方法可以解决这个问题。

使用引用的 RCL 中的静态资源

来自documentation

RCL 的 wwwroot 文件夹中包含的文件在前缀 _content/{LIBRARY NAME}/ 下暴露给 RCL 或消费应用程序。例如，名为 Razor.Class.Lib 的库会导致静态内容的路径位于 _content/Razor.Class.Lib/。当生成 NuGet 包且程序集名称与包 ID 不同时，请使用 {LIBRARY NAME} 的包 ID。

使用反射读取嵌入的资产内容

这种方法让您可以直接执行 Javascript 代码，而无需在 HTML 中包含<script> 的文件。

首先创建辅助方法来检索嵌入的 javascript 文件内容：

public static string GetEmbeddedJSInteropCode(Assembly assembly, string path)
{
    using var stream = assembly.GetManifestResourceStream(path);
    using var reader = new StreamReader(stream);
    return reader.ReadToEnd();
}

那你就可以这样称呼了

await JSRuntime.InvokeVoidAsync("eval", GetEmbeddedJSInteropCode(typeof(SomeRCLType).Assembly, "SomeRCL.SomeFolder.Init.js"));
await JSRuntime.InvokeVoidAsync("someRCLFunction", "Foobar");

【讨论】：

【解决方案2】：

在 Blazor Web 程序集项目中引用 Razor 类程序集时，会将 Razor wwwroot/ 文件夹的内容复制到 Blazor _content/*namespace*/ 文件夹中。所以解决办法就是把 wwwroot/ 中的 .js 文件移到脚本标签中，像这样引用：

<script src="_content/*assembly_name*/file.js"></script>

【讨论】：