文章/答案/技术大牛

发布

社区首页 >问答首页 >需要Blazor和LibMan的协助来安装引导带和相关组件(即Popper和jQuery)

问需要Blazor和LibMan的协助来安装引导带和相关组件(即Popper和jQuery)
EN

Stack Overflow用户

提问于 2022-10-21 14:19:35

回答 2查看 122关注 0票数 1

我正在开发一个Blazor项目，在这个项目中我使用了Bootstrap；当然，这个项目需要jQuery和Popper才能让工具提示和弹出器工作。

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

jQuery
波普尔
引导(css和js)

把它们放在需要去的地方：

Www.root/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>

twitter-bootstrap

blazor

libman

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-10-26 09:59:07

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

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

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

解决方案资源管理器->右键单击项目->添加->客户端库-> twitter-引导->选择特定文件-> 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>

票数 1

Stack Overflow用户

发布于 2022-10-24 06:29:45

我试着充分解释我在我的项目中使用的一般解决方案。可能，您的问题在于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应用程序的页面\_Layout.cshtml文件(或者Blazor应用程序的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>

我们在head部分定义css文件的条目，在关闭body标记之前定义js文件，当然在<script src="_framework/blazor.server.js"></script>之前定义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放在这里

请也试试这个。它意味着默认安装路径(/lib)在libman文件夹中。

我认为，现在正在运行的项目代码与项目代码之间的所有差异都是这样的。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/74155091

复制

相似问题

问需要Blazor和LibMan的协助来安装引导带和相关组件(即Popper和jQuery)
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问需要Blazor和LibMan的协助来安装引导带和相关组件(即Popper和jQuery)EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问需要Blazor和LibMan的协助来安装引导带和相关组件(即Popper和jQuery)
EN