需要 Blazor 和 LibMan 的帮助来安装 Bootstrap 和相关组件(即 Popper 和 jQuery)

我正在处理一个使用Bootstrap的Blazor项目;当然，需要jQuery和Popper才能使工具提示和弹出框工作。

最初，我只是"手动"下载了所需的文件：

jQuery
波普尔
Bootstrap (css 和 js)

并将它们放在需要去的地方：

wwwroot/css
wwwroot/js

wwwroot的结构如下所示：

/wwwroot
|
|- css/
|  |
|  |- bootstrap/
|  |
|  `- site.css
|
|- images/
|
`- js/
|
|- bootstrap/
|
|- jquery/
|
|- popper/
|
|- BootstrapJavascript.js
|
`- JavaScript.js

然而，"权力"已经决定他们想让它更有效和自动化，所以我现在需要使用 LibMan 来安装所有内容，我正在使用这种方法：

Solution Explorer -> Project -> Add -> Client-Side Library...

因此，安装时一切顺利，但是我在使用Popper时遇到了问题。安装后，wwwroot现在如下所示：

/wwwroot
|
|- css/
|  |
|  |- bootstrap*.*
|  |
|  `- site.css
|
|- images/
|
|- js/
|  |
|  |- bootstrap*.*
|  |
|  |- cjs/
|  |
|  |- esm/
|  |
|  |- umd/
|  |
|  `- BootstrapJavascript.js
|
`- scss/

我收到错误，指示应用程序找不到某些库或库的组件。

最初，在使用 LibMan 安装 Popper 时，LibMan 想把 Popper 放在这里：

wwwroot/lib/popper.js/

但是，我选择将波普尔放入：

wwwroot/js/

此外，在 Bootstraps 网站上，他们指示预加载使用工具提示和弹出窗口的功能，如下所示：

// For Bootstrap's Tooltips
// https://getbootstrap.com/docs/5.2/components/tooltips/
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

// For Bootstrap's Popovers
// https://getbootstrap.com/docs/5.2/components/popovers/
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

我在我的BootstrapJavascript.js文件中有。

我得到的一些错误：

ReferenceError: exports is not defined
at https://localhost:5003/js/cjs/popper.js:7:23

App.razor:line 48处的错误，在这里：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JSRuntime.InvokeAsync<IJSObjectReference>("import", "/js/cjs/popper.js"); // THIS IS LINE #48
await JSRuntime.InvokeAsync<IJSObjectReference>("import", "/js/bootstrap.js");
await JSRuntime.InvokeAsync<IJSObjectReference>("import", "/js/BootstrapJavaScript.js");
}
}

当我手动安装Bootstrap，Popper和jQuery时，该应用程序"完美"运行，现在不是。

我需要做什么才能让它像手动安装时一样工作？

<小时 /><小时 />

编辑：

libman.json

{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": [
{
"library": "jquery@3.6.1",
"destination": "wwwroot/js/jquery/"
},
{
"library": "popper.js@2.11.6",
"destination": "wwwroot/js/popper/"
},
{
"library": "twitter-bootstrap@5.2.2",
"destination": "wwwroot/"
}
]
}

App.razor

protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JSRuntime.InvokeAsync<IJSObjectReference>("import", "/js/jquery/jquery.min.js");
await JSRuntime.InvokeAsync<IJSObjectReference>("import", "/js/popper/cjs/popper.min.js");
await JSRuntime.InvokeAsync<IJSObjectReference>("import", "/js/bootstrap.min.js");
await JSRuntime.InvokeAsync<IJSObjectReference>("import", "/js/BootstrapJavaScript.js");
}
}

_Host.cshtml：

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="~/" />
<link rel="stylesheet" href="~/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
...
</div>
<script>
var blackpearlScript = document.createElement('script');
blackpearlScript.setAttribute('src', '/js/JavaScript.js');
document.head.appendChild(blackpearlScript);
</script>
</body>

首先，我不知道你为什么把你的js文件放在App.razor，我认为最好将它们添加到你的MainLayout.razor或_Host.cshtml中：

<script src="~/lib/jquery/jquery.min.js"></script>

其次，我认为您不需要包含 Popper，因为 Bootstrap 已经在bootstrap.bundle.js中拥有此库，请参阅此链接。您可以像这样添加此文件：

解决方案资源管理器 ->右键单击项目 -> 添加 -> 客户端库 -> twitter-bootstrap -> 选择特定文件 -> js -> bootstrap.bundle.min.js。

请注意，文件将添加到lib文件夹中，如果您想更改位置，则需要更改libman.json，我认为没有必要更改位置，只需将它们保存在lib文件夹中即可。

然后，MainLayout.razor或_Host.cshtml的脚本将是：

<script src="~/lib/jquery/jquery.min.js"></script>
<script src="~/lib/twitter-bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="~/js/BootstrapJavaScript.js"></script>

我试图充分解释我在项目中使用的一般解决方案。可能，您的问题在于 js 和 css 条目的定义。

首先使用以下命令安装LibMan：

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

下一步是在项目中添加一个名为libman.json的文件。要添加此文件，只需在命令提示符下输入以下命令：

libman init

如您所见，我们还可以指定包接收源，默认情况下设置为 cdnjs，实际上是无数客户端包的内容分发网络 (CDN)。我们还可以在库数组中输入所需的包。即使对于每个包，我们也可以覆盖提供程序。

`{"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": [
]
}`

现在，您可以通过以下命令获取Jquery，Bootstrap等：

libman install bootstrap --provider unpkg --destination wwwroot/lib/bootstrap
libman install jquery --provider unpkg --destination wwwroot/lib/jquery

最后，libman.json 文件将具有以下结构：

`{"version": "1.0",
"defaultProvider": "",
"libraries": [
{
"provider": "cdnjs",
"library": "twitter-bootstrap@5.1.3",
"destination": "wwwroot/lib/twitter-bootstrap/"
},    
{
"provider": "unpkg",
"library": "jquery@3.6.0",
"destination": "wwwroot/lib/jquery/"
}
]
}`

收到其客户端包后，我们会将相关条目添加到 Blazor Server 应用程序的页面_Layout.cshtml文件(或 Blazor WASM 应用程序的wwwroot/index.html文件)。

<head>
<base href="~/" />      
<link rel="stylesheet" href="lib/twitter- 
bootstrap/css/bootstrap.min.css" />
</head>
<body>
..........
..........
<script src="lib/jquery/dist/jquery.min.js"></script>        
<script src="_framework/blazor.server.js"></script>
</body>

我们在关闭正文标记之前，当然在 Blazor Server 中<script src="_framework/blazor.server.js"></script>之前，在 head 部分中定义 css 文件的条目和 js 文件的条目。无需提及起始文件夹wwwroot;由于定义了base href，因此它指向此文件夹。

您还可以使用libman restore命令重新安装软件包;在这种情况下，就像 Nuget 一样，包将从相关提供程序的 libman.json 文件下载并添加到项目中。

还有一点：您可以按如下方式修改程序的 csproj 文件，以便在构建之前自动运行 libman restore 命令：

<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>net5.0</TargetFramework>
</PropertyGroup>
<Target Name="DebugEnsureLibManEnv" BeforeTargets="BeforeBuild" Condition=" '$(Configuration)' == 'Debug' ">
<!-- Ensure libman is installed -->
<Exec Command="libman --version" ContinueOnError="true">
<Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
</Exec>
<Error Condition="'$(ErrorCode)' != '0'" Text="libman is required to build and run this project. To continue, please run `dotnet tool install -g Microsoft.Web.LibraryManager.Cli`, and then restart your command prompt or IDE." />
<Message Importance="high" Text="Restoring dependencies using 'libman'. This may take several minutes..." />
<Exec WorkingDirectory="$(MSBuildProjectDirectory)" Command="libman restore" />
</Target>
</Project>

编辑：

根据您的评论和编辑的问题：

首先，引导包安装在wwwroot的根目录内。

{
"library": "twitter-bootstrap@5.2.2",
"destination": "wwwroot/"
}

但是，它在JS文件夹中被引用。

await JSRuntime.InvokeAsync<IJSObjectReference>("import", "/js/bootstrap.min.js");

其次，请从_Host.cshtml中删除以下行：

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

我建议您尝试引用_Host.cshtml文件，而不是引用OnAfterRenderAsync方法，如下所示：

<link rel="stylesheet" href="twitter-bootstrap/css/bootstrap.min.css" />

您可以对其他库执行相同的操作，例如Popper。

最初，在使用LibMan安装Popper时，LibMan想把Popper放在这里。

也请尝试一下。它表示libman文件夹中的默认安装路径 (/lib)。

我认为现在正在运行的项目代码和项目代码之间的所有差异都是这些东西。

相关内容

最新更新

热门标签：