ASP.NET Core에서 Bower 사용 하 여 클라이언트 쪽 패키지 관리Manage client-side packages with Bower in ASP.NET Core

하 여 Rick Anderson하십시오 Noel 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 "웹에 대 한 패키지 관리자" 자신을 호출 합니다.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 프로젝트에 대 한 이러한 정적 파일은 같은 클라이언트 쪽 라이브러리에 내재 jQuery 하 고 부트스트랩합니다.For 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. jQuery 하 고 부트스트랩 설치할지, 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 Awesome합니다.In 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 웹 앱 만들기를 ASP.NET Core 웹 응용 프로그램 (.NET Core) 템플릿.Create a new ASP.NET Core Web app with the ASP.NET Core Web Application (.NET Core) template. 선택 웹 응용 프로그램 하 고 인증 안 함합니다.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. (위의 예에서 4.6.3) IntelliSense 목록에 맨 위 항목에는 패키지의 안정적인 최신 버전으로 간주 됩니다.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.json합니다.Open 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 파일에 추가할 태그 도우미 에 대 한 Development합니다.Open 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,Production입니다.In 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 웹 앱 만들기를 ASP.NET Core 웹 응용 프로그램 (.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.

    프로젝트에 포함 되어 있는지 확인 합니다 부트스트랩 하 고 jQuery 디렉터리 wwwroot/lib합니다.Verify the project includes the bootstrap and jQuery directories in wwwroot/lib. 사용 하 여 bower 합니다 .bowerrc 자산을 설치 하는 파일 wwwroot/lib합니다.Bower 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.StaticFiles 프로젝트에 NuGet 패키지.Add the Microsoft.AspNetCore.StaticFiles NuGet package to the project.
  • 사용 하 여 처리할 수 있는 정적 파일을 사용 하도록 설정 합니다 정적 파일 미들웨어합니다.Enable static files to be served with the Static file middleware. 호출을 추가 UseStaticFilesConfigure 메서드의 Startup합니다.Add 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. 기본적으로 정적 콘텐츠를 처리할 수 없는 외부 wwwroot합니다.By 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.html합니다.Run the app and navigate to http://localhost:<port>/Index.html. 사용 하 여 또는 Index.html 키를 눌러 열 Ctrl+Shift+W합니다.Alternatively, 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 스타일 적용