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”-File 中：

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

我的 *.js 文件在哪里？例如：query.dataTables.js ?? 我在“C:\Users\xxxxx.nuget\packages\jquery.datatables.10.15 上找到了它并且 "C:\Users\xxxxxx.nuget\packages\jquery\1.7.0"

我真的必须手动将它复制到我的 wwwroot 文件夹吗？如果是这样，为什么我应该使用包管理器？

感谢您的帮助！！

Answer 1

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

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

这样的 CDN 上

.NET web 应用程序加载客户端资产的当前方法是使用 LibMan 或 NPM，并有某种 webpack 安排到 compile/pack/copy。您 永远不会 按照您建议的方式从 /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 Class 库中，可以在不了解底层 js 的情况下使用。第四篇文章涉及导入 npm 库并在 Web 程序集应用程序中使用它们。我将把 link 放在下面，但基本上过程是：

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

See blog post here 了解全部详细信息（这是 5 部分系列的第 4 部分 - 第 5 部分将其全部放入剃刀 class 库中，因此您可以将它添加到项目中而不会看到 javascript)

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

Blazor：如何包含使用 Nuget-Package-Manager 安装的 javascript-package？

Blazor: how to include javascript-package, which is installed with Nuget-Package-Manager?

javascript

c#

nuget-package

blazor

Blazor 方法

数据表，JQuery