需要Blazor和LibMan的幫助來安裝Bootstrap和相關組件（即Popper和jQuery）-有解無憂

我正在開發一個使用 Bootstrap 的 Blazor 專案；當然，這需要 jQuery 和 Popper 才能使工具提示和彈出視窗正常作業。

最初，我只是“手動”下載了所需的檔案：

查詢
波普爾
引導程式（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/

但是，我選擇將 Popper 放入：

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 時，該應用程式運行“完美”，但現在不是了。

我需要做什么才能使它像我手動安裝時一樣作業？

編輯：

庫曼.json

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "[email protected]",
      "destination": "wwwroot/js/jquery/"
    },
    {
      "library": "[email protected]",
      "destination": "wwwroot/js/popper/"
    },
    {
      "library": "[email protected]",
      "destination": "wwwroot/"
    }
  ]
}

應用程式剃刀

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");
    }
}

_主機.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>

uj5u.com熱心網友回復：

首先，我不知道為什么要放入 js 檔案App.razor，我認為最好不要將它們添加到MainLayout.razoror中_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>

uj5u.com熱心網友回復：

我試圖全面解釋我在我的專案中使用的一般解決方案。您的問題可能出在 js 和 css 條目的定義中。

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

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

下一步是在專案中添加一個名為 libman.json 的檔案。要添加此檔案，只需在命令提示符中輸入以下命令：

libman init

可以看到，我們還可以指定包的接收源，默認設定為cdnjs，實際上是無數客戶端包的內容分發網路（CDN）。我們也可以在 libraries 陣列中輸入我們需要的包。即使對于每個包，我們也可以覆寫提供者。

`{"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": "[email protected]",
  "destination": "wwwroot/lib/twitter-bootstrap/"
},    
{
  "provider": "unpkg",
  "library": "[email protected]",
  "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>

我們在 head 部分定義 css 檔案的入口，在關閉 body 標簽之前定義 js 檔案，當然<script src="_framework/blazor.server.js"></script>在 Blazor Server 之前。無需提及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>

編輯：

根據您的評論和編輯的問題：

首先，bootstrap 包安裝在wwwroot.

{
  "library": "[email protected]",
  "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

我認為我現在正在運行的專案的代碼和你的專案的代碼之間的所有差異都是這些東西。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/534541.html

標籤：推特引导程序开拓者利比曼

上一篇：Nuxt3：為什么這個文本輸入元素不遵守maxlength屬性？

下一篇：如何使我的卡片位于中心但始終從左側開始？