用戶端使用管理套件在 ASP.NET Core 中的 BowerManage client-side packages with Bower in ASP.NET Core

作者:Rick AndersonNoel Rice,和Scott AddieBy Rick Anderson, Noel Rice, and Scott Addie

重要

Bower 會維護,而其維護人員會建議使用不同的解決方案。While Bower is maintained, its maintainers recommend using a different solution. 程式庫管理員(簡稱 LibMan) 是 Visual Studio 的新用戶端程式庫取得的工具 (Visual Studio 15.8 或更新版本)。Library Manager (LibMan for short) is Visual Studio's new client-side library acquisition tool (Visual Studio 15.8 or later). 如需詳細資訊,請參閱使用 LibMan 讓 ASP.NET Core 取得用戶端程式庫For more information, see 使用 LibMan 讓 ASP.NET Core 取得用戶端程式庫. Bower 是透過 15.5 版支援 Visual Studio 中。Bower is supported in Visual Studio through version 15.5.

Webpack 使用 yarn 是一個常見的方法,為其移轉指示可用。Yarn with Webpack is one popular alternative for which migration instructions are available.

Bower呼叫其本身的 「 web 的套件管理員 」。Bower calls itself "A package manager for the web". 在.NET 生態系統,它會填滿 NuGet 無法傳遞靜態內容的檔案所留下的 void。Within the .NET ecosystem, it fills the void left by NuGet's inability to deliver static content files. 針對 ASP.NET Core 專案,這些靜態檔案會將用戶端程式庫,例如原本就jQueryBootstrapFor ASP.NET Core projects, these static files are inherent to client-side libraries like jQuery and Bootstrap. 針對.NET 程式庫,您仍然使用NuGet封裝管理員。For .NET libraries, you still use NuGet package manager.

以設定用戶端的 ASP.NET Core 專案範本建立的專案建置程序。New projects created with the ASP.NET Core project templates set up the client-side build process. jQueryBootstrap安裝之後,而且 Bower 支援。jQuery and Bootstrap are installed, and Bower is supported.

用戶端套件都會列入bower.json檔案。Client-side packages are listed in the bower.json file. ASP.NET Core 專案範本會設定bower.json jQuery、 jQuery 驗證與啟動程序。The ASP.NET Core project templates configures bower.json with jQuery, jQuery validation, and Bootstrap.

在本教學課程中,我們將新增的支援Font AwesomeIn this tutorial, we'll add support for Font Awesome. Bower 套件可以使用來安裝管理 Bower 封裝UI 或手動bower.json檔案。Bower packages can be installed with the Manage Bower Packages UI or manually in the bower.json file.

透過管理 Bower 封裝 UI 的安裝Installation via Manage Bower Packages UI

  • 建立新的 ASP.NET Core Web 應用程式與ASP.NET Core Web 應用程式 (.NET Core) 範本。Create a new ASP.NET Core Web app with the ASP.NET Core Web Application (.NET Core) template. 選取 Web 應用程式無驗證Select Web Application and No Authentication.

  • 以滑鼠右鍵按一下方案總管 中的專案,然後選取管理 Bower 封裝(或者主功能表中,從專案 > 管理 Bower 封裝).Right-click the project in Solution Explorer and select Manage Bower Packages (alternatively from the main menu, Project > Manage Bower Packages).

  • Bower:<專案名稱> 視窗中,按一下 瀏覽 索引標籤,並輸入,以篩選的套件清單font-awesome在搜尋方塊中:In the Bower: <project name> window, click the "Browse" tab, and then filter the packages list by entering font-awesome in the search box:

    管理 bower 套件

  • 確認 」 將變更儲存到bower.json」 核取方塊。Confirm that the "Save changes to bower.json" check box is checked. 從下拉式清單中選取版本,然後按一下安裝 按鈕。Select a version from the drop-down list and click the Install button. 輸出視窗會顯示安裝詳細資料。The Output window shows the installation details.

在 bower.json 的手動安裝Manual installation in bower.json

開啟bower.json檔案,並將 「 字型-絕佳 」 加入至相依性。Open the bower.json file and add "font-awesome" to the dependencies. IntelliSense 會顯示可用的套件。IntelliSense shows the available packages. 選取套件時,會顯示可用的版本。When a package is selected, the available versions are displayed. 下列影像還舊,並不會符合您所看到的內容。The images below are older and won't match what you see.

Bower 套件總管 的 IntelliSense

bower 版本 IntelliSense

Bower 用法語意版本設定組織相依性。Bower uses semantic versioning to organize dependencies. 語意版本設定,也就是 SemVer 識別套件的編號配置<主要 >。<次要 >。<修補程式 >。Semantic versioning, also known as SemVer, identifies packages with the numbering scheme <major>.<minor>.<patch>. IntelliSense 會顯示只有幾個常見的選擇,以簡化語意版本設定。IntelliSense simplifies semantic versioning by showing only a few common choices. 在 [IntelliSense] 清單 (在上述範例中的 4.6.3) 頂端的項目會被視為封裝的最新穩定版本。The top item in the IntelliSense list (4.6.3 in the example above) is considered the latest stable version of the package. 插入號 (^) 符號符合最新的主要版本和波狀符號 (~) 比對的最新的次要版本。The caret (^) symbol matches the most recent major version and the tilde (~) matches the most recent minor version.

儲存bower.json檔案。Save the bower.json file. Visual Studio 會監看bower.json變更的檔案。Visual Studio watches the bower.json file for changes. 在儲存時, bower 安裝執行命令。Upon saving, the bower install command is executed. 請參閱 [輸出] 視窗Bower/npm檢視執行的確切命令。See the Output window's Bower/npm view for the exact command executed.

開啟 .bowerrc下方的檔案bower.jsonOpen the .bowerrc file under bower.json. directory屬性設定為wwwroot/lib表示位置 Bower 將安裝套件的資產。The directory property is set to wwwroot/lib which indicates the location Bower will install the package assets.

{
 "directory": "wwwroot/lib"
}

您可以使用 [方案總管] 中的 [搜尋] 方塊來尋找及顯示字型很棒的封裝。You can use the search box in Solution Explorer to find and display the font-awesome package.

開啟Views\Shared_Layout.cshtml檔案,並將字型很棒的 CSS 檔案新增至環境標籤協助程式DevelopmentOpen the Views\Shared_Layout.cshtml file and add the font-awesome CSS file to the environment Tag Helper for Development. 從 [方案總管] 拖字型 awesome.css<environment names="Development">項目。From Solution Explorer, drag and drop font-awesome.css inside the <environment names="Development"> element.

<environment names="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
    <link href="~/lib/font-awesome/css/font-awesome.css" rel="stylesheet" />
</environment>

您可以在生產環境應用程式中加入字型 awesome.min.css環境標籤協助程式,如Staging,ProductionIn a production app you would add font-awesome.min.css to the environment tag helper for Staging,Production.

內容取代Views\Home\About.cshtml Razor 檔案,以下列標記:Replace the contents of the Views\Home\About.cshtml Razor file with the following markup:

@{
    ViewData["Title"] = "About";
}

<div class="list-group">
    <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; Home</a>
    <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; Library</a>
    <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; Applications</a>
    <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; Settings</a>
</div>

執行應用程式並巡覽至 About 檢視來確認字型很棒的封裝可運作。Run the app and navigate to the About view to verify the font-awesome package works.

探索用戶端建置程序Exploring the client-side build process

大部分的 ASP.NET Core 專案範本已設定為使用 Bower。Most ASP.NET Core project templates are already configured to use Bower. 這個下一個逐步解說開頭空白的 ASP.NET Core 專案,並手動新增每個片段,因此您可以取得了解如何在專案中使用 Bower。This next walkthrough starts with an empty ASP.NET Core project and adds each piece manually, so you can get a feel for how Bower is used in a project. 您可以看到會發生什麼事的專案結構和執行階段輸出,如每個組態變更。You can see what happens to the project structure and the runtime output as each configuration change is made.

可搭配 Bower 的用戶端建置程序的一般步驟如下:The general steps to use the client-side build process with Bower are:

  • 定義您專案中使用的封裝。Define packages used in your project.
  • 從您的網頁參考套件。Reference packages from your web pages.

定義套件Define packages

一旦您在清單中的套件bower.json檔案,Visual Studio 會下載它們。Once you list packages in the bower.json file, Visual Studio will download them. 下列範例會使用 Bower 載入 jQuery 和 Bootstrap wwwroot資料夾。The following example uses Bower to load jQuery and Bootstrap to the wwwroot folder.

  • 建立新的 ASP.NET Core Web 應用程式與ASP.NET Core Web 應用程式 (.NET Core) 範本。Create a new ASP.NET Core Web app with the ASP.NET Core Web Application (.NET Core) template. 選取 專案範本,然後按一下確定Select the Empty project template and click OK.

  • 在 [方案總管] 中,以滑鼠右鍵按一下專案 >加入新項目,然後選取Bower 組態檔In Solution Explorer, right-click the project > Add New Item and select Bower Configuration File. 注意:A .bowerrc也會加入檔案。Note: A .bowerrc file is also added.

  • 開啟bower.json,並新增 jquery 來啟動dependencies一節。Open bower.json, and add jquery and bootstrap to the dependencies section. 產生bower.json檔案看起來如下列範例所示。The resulting bower.json file will look like the following example. 版本會隨著時間改變,而不符合下列映像。The versions will change over time and may not match the image below.

{
  "name": "asp.net",
  "private": true,
  "dependencies": {
    "jquery": "3.1.1",
    "bootstrap": "3.3.7"
  }
}
  • 儲存bower.json檔案。Save the bower.json file.

    請確認專案包含bootstrapjQuery中的目錄wwwroot/libVerify the project includes the bootstrap and jQuery directories in wwwroot/lib. Bower 用法 .bowerrc檔案,以安裝中的資產wwwroot/libBower uses the .bowerrc file to install the assets in wwwroot/lib.

    注意:[管理 Bower 封裝] UI 會提供替代檔案手動編輯。Note: The "Manage Bower Packages" UI provides an alternative to manual file editing.

啟用靜態檔案Enable static files

  • 新增Microsoft.AspNetCore.StaticFilesNuGet 封裝加入專案。Add the Microsoft.AspNetCore.StaticFiles NuGet package to the project.
  • 啟用靜態檔案,以提供靜態檔案中介軟體Enable static files to be served with the Static file middleware. 將呼叫加入UseStaticFilesConfigure方法StartupAdd a call to UseStaticFiles to the Configure method of Startup.
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;

public class Startup
{
    public void Configure(IApplicationBuilder app)
    {
        app.UseStaticFiles();

        app.Run(async (context) =>
        {
            await context.Response.WriteAsync("Hello World!");
        });
    }
}

參照套件Reference packages

在本節中,您將建立 HTML 網頁以確認它可以存取部署的封裝。In this section, you will create an HTML page to verify it can access the deployed packages.

  • 加入新的 HTML 網頁,名為Index.htmlwwwroot資料夾。Add a new HTML page named Index.html to the wwwroot folder. 注意:您必須新增至 HTML 檔案wwwroot資料夾。Note: You must add the HTML file to the wwwroot folder. 根據預設,無法提供靜態內容之外wwwrootBy default, static content cannot be served outside wwwroot. 請參閱靜態檔案如需詳細資訊。See Static files for more information.

    內容取代Index.html以下列標記:Replace the contents of Index.html with the following markup:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Bower Example</title>
    <link href="lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
</head>
<body>
    <div class="jumbotron">
        <h1>Using the jumbotron style</h1>
        <p>
            <a class="btn btn-primary btn-lg" role="button">Stateful button</a>
        </p>
    </div>
    <script src="lib/jquery/dist/jquery.js"></script>
    <script src="lib/bootstrap/dist/js/bootstrap.js"></script>
    <script>
        $(".btn").click(function () {
            $(this).text('loading')
                .delay(1000)
                .queue(function () {
                    $(this).text('reset');
                    $(this).dequeue();
                });
        });
    </script>
</body>

</html>
  • 執行應用程式,並瀏覽至http://localhost:<port>/Index.htmlRun the app and navigate to http://localhost:<port>/Index.html. 或者,使用Index.html開啟,請按Ctrl+Shift+WAlternatively, with Index.html opened, press Ctrl+Shift+W. 請確認 jumbotron 樣式會套用,jQuery 程式碼會回應按一下按鈕時,並啟動程序的按鈕狀態變更。Verify that the jumbotron styling is applied, the jQuery code responds when the button is clicked, and that the Bootstrap button changes state.

    套用 jumbotron 樣式