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

Question

恐怕这是一个愚蠢的问题。但是我没有管理它来使用我的 JS 包(例如 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 文件夹吗？如果是这样，为什么我应该使用包管理器？

感谢您的帮助!

Answer 1

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

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

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

Blazor 方法

Blazor(自 .NET 5.0 起)可以加载嵌入式 JS 模块(从您的代码)或直接从 URL。

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

因为 Blazor 是一个 SPA，所以您不包含使用 <script> 的 JavaScript标记在您的 HTML 中，您应该将它作为一个模块加载并在那里引用它。

本文档对其进行了解释: https://learn.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 应用程序要容易得多。