如何将从 NuGet bootstrap 包下载的内容添加到 wwwroot？

Question

我刚刚从 NuGet 下载了引导程序包，但我不明白如何在 /wwwroot/... 中实际找到它，无论它应该是什么（ASP.NET Core 2.X MVC 项目）。我没有使用VisualStudio的经验，我猜想如果是VS的话可能会自动生成。我可以在 Rider 中做什么？

Answer 1

在 VisualStudio 和 Rider 中，有很多工具可以安装 JQuery、bootstrap、AngularJs 等客户端包。由于 Asp.Net Core 项目不允许您使用 NuGet Package Manager 来处理客户端依赖项，因此您应该使用 NPM、yarn、web pack；或者对于 Visual Studio 用户，您可以使用 Library Manager(LibMan)，这是一个轻量级客户端端库获取工具。我将为在 Mac 或 Linux 环境下使用 JetBrains Rider 的开发人员解释 NPM 的用法，为 Visual Studio 用户解释 LibMan 的用法。如果版本较低，您可以从同一屏幕进行更新。

对于 Visual Studio 用户： 为了能够使用 LibMan，您应该拥有 VS 2017 版本 15.8 或更高版本。您可以从“帮助”->“关于 Microsoft Visual Studio”选项卡进行检查。完成后，右键单击项目并选择“添加”->“客户端库”。选择 cdnjs 提供程序并在库文本框中输入要安装的包的名称（bootstrap、JQuery 等），然后单击“安装”按钮。安装完成后，您将看到在 wwwroot 文件夹中创建了一个 lib 文件。您可以跳过Mac用户部分，下面我还为绝对初学者解释了如何使用参考。

对于 Mac/Jetbrains Rider 用户： 转到以下路径：查看 -> 工具 Windows -> 终端并运行“npm install --save bootstrap”命令。您可能会因为没有 package.json 而遇到 saveError。忽略它。

下载后（您可以直接从项目路径查看）打开Finder并转到您的项目路径。创建一个名为 lib 的目录。 （名称并不重要，但该文件夹应该位于 wwwroot 文件下）。从 Node_Modules 中剪切 bootstrap 文件夹并将其粘贴到您创建的 lib 文件中。

这部分对于 Visual Studio 和 Jetbrains Rider 用户来说是相同的：

完成后，将以下链接（如果您有不同的路径，请使用该链接）添加到您的 _Layout 页面标题（建议）或直接将引用添加到特定视图中：

<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet"/>

并在主体中用 div 封装 @RenderBody 并使用引导类（我使用容器）来查看您的更改是否已应用。

<div class="container">
    @RenderBody()
</div>

尝试在你的索引页上添加一些带 bootstrap 的 Html，看看是否可以使用 bootstrap。如果您仍然看不到，那么我建议您转到提交更改（Command + K）并确保引导文件位于正确的路径下。

Answer 2

对于 .NET Core Web 项目，您无法使用 NuGet 安装客户端依赖项，例如 Bootstrap；相反，您必须使用 Web 包管理器，例如 Bower（同时已弃用）、yarn 或 npm 和 webpack。 NuGet 仅适用于服务器端依赖项。

Answer 3

在 VS for ASP.NET CORE 中，所有包都放在“依赖项”中，引导文件保存在“wwwroot -> lib -> bootstrap -> dist -> css”中。

Answer 4

正如 PFX 所说，使用 nuget 安装客户端依赖项不是最好的主意，因为它不会自动将它们包含在您的项目中，而是向 .csproj 文件添加一个新条目：

  <ItemGroup>
    <PackageReference Include="bootstrap" Version="5.3.3" />
  </ItemGroup>

以及存储在

%userprofile%\.nuget\packages\bootstrap

中的文件

在这种情况下，您可能需要手动将这些文件传输到目的地，这是一个非常糟糕的主意。

一般推荐的解决方案是使用 Bower 或 npm 来安装依赖项，例如

npm i bootstrap

在这种情况下，它会在运行目录的

node_module

中下载依赖项，而不是在

wwwroot

文件夹中。您可以使用 Webpack 这样的构建工具或 Gulp 这样的任务运行程序在构建过程中将必要的文件从

node_modules

复制到 wwwroot 目录，这对于简单的 ASP.NET Core 应用程序来说可能很麻烦。

所以微软为这个简单的场景引入了Libman，但是

Rider

没有Libman，为此你可以使用Libman cli

首先您需要通过

dotnet-cli

安装此工具：

dotnet tool install -g Microsoft.Web.LibraryManager.Cli

然后安装你的依赖项：

libman install bootstrap

这将带来一些与 Visual Studio 具有类似体验的提示，并将这些依赖项安装在您的

wwwroot

目录中