Blazor：如何包含与 Nuget-Package-Manager 一起安装的 javascript-package？

Question

恐怕这将是一个愚蠢的问题。但是我没有管理它来使用我的 JS-Package（例如 jQuery），我已经在我的 .net 5 Blazor Server-App 中安装了 Visual Studio Nuget-Package-Manage。

我做了什么： 安装软件包。在这里，我安装了 jquery.datatable，其中包含 jQuery 本身：

Image of my Project

但现在，我不知道如何将它包含在我的“_Host.cshmtl”-文件中：

<script type="text/javascript" charset="utf-8" src="???WHERE IS IT????"></script>

我的 *.js 文件在哪里？例如：query.dataTables.js ?? 我在“C:\Users\xxxxx.nuget\packages\jquery.datatables\1.10.15”和 "C:\Users\xxxxxx.nuget\packages\jquery\1.7.0"

我真的必须手动将它复制到我的 wwwroot-Folder 吗？ 如果是这样，我为什么要使用包管理器？

感谢您的帮助！！

Answer 1

使用 JavaScript 的传统 Web 应用程序通常从本地文件夹或 Web CDN（例如 CDNJS.com 等）加载文件。然后从页面加载（通常从布局文件中引用）。

过去曾经是可以通过 NUGET 包加载 JS 库的情况，但现在不鼓励这种方法。它必须在设定的位置修复脚本的创建，例如/Scripts 没有灵活性。几乎所有客户端库现在都作为包在 NPM 中，或者在 cdnjs.com 等 CDN 上。

.NET Web 应用程序加载客户端资产的当前方法是使用 LibMan 或 NPM 并有某种 webpack 安排来编译/打包/复制。您永远不会按照您建议的方式从 /packages 文件夹加载 JS。

Blazor 方法

Blazor（自 .NET 5.0 起）可以加载嵌入式 JS 模块（从您的代码），也可以直接从 URL 加载。

如果你想在你的应用程序中打包一些 JS，你应该查看Razor Component libraries。这允许将静态资产（例如 JS 文件）嵌入代码中，Blazor 通过 _content 路由提供这些资源，例如 _content/LibraryName/myfile.js.

由于 Blazor 是一个 SPA，因此您不会在 HTML 中使用 <script> 标记包含 JavaScript，因此您应该将其作为模块加载并在此处引用。

本文档对此进行了解释： https://docs.microsoft.com/en-us/aspnet/core/blazor/call-javascript-from-dotnet?view=aspnetcore-5.0#blazor-javascript-isolation-and-object-references

数据表、JQuery

那么你应该在你的库中包含jquery.min.js 和jquery.datatables.min.js 吗？我建议更好的方法是从 CDN 加载 - 你的包更小，并且 URL 可能已经被缓存和加载，例如

var module = await js.InvokeAsync<IJSObjectReference>(
    "import", "https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js");

这会直接从 URL 按需加载模块。您还需要在此之前加载 jquery。

最后我要说一句：你确定要走这条路吗？

NUGET 上有多个用于渲染和处理表的本机 Blazor 库。您会发现这样做比尝试将基于 jquery 的库修补到 Blazor 应用中要容易得多。

Answer 2

我遇到了类似的问题。不是使用相同的库，但我想做一些 Blazor 库中还没有的东西。我需要一个能够处理默认 HTML 5 视频元素无法处理的特定格式的视频播放器。有一个开源播放器 videoJS 可以完成这项工作，但它是一个 javascript 库。它在 npm 上可用，并且有 cdn - 但是插件（据我所知）不在 CDN 上 - 所以我不得不走 npm 路线。

当你安装一个 npm 包时，它会将它放入一个隐藏的 node_modules 文件夹中。不幸的是，即使您指向该路径，甚至将该文件与其他 js 文件一起复制，它也无法正常工作。 Npm 包被设计为由 nodejs 运行，而不是直接在浏览器中运行。为了让它们在 Blazor 应用程序（在浏览器中）中运行，您必须执行将其转换为浏览器友好格式的中间步骤。

我真正想要的是一个可重用的组件，它包装了 javascript。 我花了一段时间才到达那里，但我终于弄明白了。我已经在我的博客上写了一系列文章来详细说明它。最后一个将所有内容移植到 Razor 类库中，无需了解底层 js 即可使用该库。第四篇文章介绍了导入 npm 库并在 Web 程序集应用程序中使用它们。我将把链接放在下面，但基本上这个过程是：

1. 创建一个文件夹，例如 JS 并为 npm 初始化它（npm init -y）
2. 安装所需的 npm 包 (npm install --save)
3. 在 JS 文件夹中创建一个 src 文件夹，您将把自己的 js 文件放入其中
4. 在 src 中创建一个 index.js 文件，用于导入所需的 javascript 模块并导出您要使用的内容
5. 安装 snowpack (npm install snowpack --save-dev)（或 webpack，但我发现 snowpack 似乎更好用）
6. 配置 snowpack 以将 src 文件夹的内容处理为 wwwroot/js（没有 snowpack 或类似的 npm 包中的文件将不会是浏览器或 blazor 可用格式）
7. 使用 javascript 隔离从 wwwroot/js 获取您的 index.js 文件

See blog post here 了解详细信息（这是 5 部分系列的第 4 部分 - 第 5 部分将所有内容放在一个 razor 类库中，因此您可以将其添加到项目中而无需查看 javascript）

我知道这已经很晚了，但这个 SO 问题是我在搜索如何做我想做的事情时不断遇到的问题，所以我想我会把我的解决方案放在这里，以防它帮助其他人搜索我所做的事情。