Visual Studio에서 ASP.NET Core와 함께 LibMan 사용

작성자: Scott Addie

Visual Studio에는 ASP.NET Core 프로젝트의 LibMan에 대한 다음과 같은 기본 제공 지원이 있습니다.

  • 빌드에서 LibMan 복원 작업 구성 및 실행 지원
  • LibMan 복원 및 정리 작업을 트리거하기 위한 메뉴 항목
  • 라이브러리를 찾고 프로젝트에 파일을 추가하기 위한 검색 대화 상자
  • LibMan 매니페스트 파일에 대한 libman.json편집 지원입니다.

샘플 코드 보기 및 다운로드(다운로드 방법)

필수 조건

라이브러리 파일 추가

다음 두 가지 방법으로 ASP.NET Core 프로젝트에 라이브러리 파일을 추가할 수 있습니다.

  1. 클라이언트 쪽 라이브러리 추가 대화 상자 사용
  2. 수동으로 LibMan 매니페스트 파일 항목 구성

클라이언트 쪽 라이브러리 추가 대화 상자 사용

클라이언트 쪽 라이브러리를 설치하려면 다음 단계를 수행합니다.

  • 솔루션 탐색기에서 파일을 추가해야 하는 프로젝트 폴더를 마우스 오른쪽 단추로 클릭합니다. 추가>클라이언트 쪽 라이브러리를 선택합니다. 클라이언트 쪽 라이브러리 추가 대화 상자가 나타납니다.

    Add Client-Side Library dialog

  • 공급자 드롭다운에서 라이브러리 공급자를 선택합니다. 기본 공급자는 CDNJS입니다.

  • 라이브러리 텍스트 상자에 가져올 라이브러리 이름을 입력합니다. IntelliSense에서 입력된 텍스트로 시작하는 라이브러리 목록을 제공합니다.

  • IntelliSense 목록에서 라이브러리를 선택합니다. 라이브러리 이름에는 @ 기호와 선택한 공급자에게 알려진 안정적인 최신 버전이 접미사로 추가됩니다.

  • 포함할 파일을 결정합니다.

    • 모든 라이브러리 파일을 포함하려면 모든 라이브러리 파일 포함 라디오 단추를 선택합니다.
    • 라이브러리 파일의 하위 집합을 포함하려면 특정 파일 선택 라디오 단추를 선택합니다. 라디오 단추를 선택하면 파일 선택기 트리를 사용할 수 있게 됩니다. 다운로드할 파일 이름 왼쪽에 있는 확인란을 선택합니다.
  • 대상 위치 텍스트 상자에 파일을 저장할 프로젝트 폴더를 지정합니다. 각 라이브러리를 개별 폴더에 저장하는 것이 좋습니다.

    제안된 대상 위치 폴더는 대화 상자가 시작된 위치를 기반으로 합니다.

    • 프로젝트 루트에서 시작된 경우:
      • wwwroot가 있으면 wwwroot/lib가 사용됩니다.
      • wwwroot가 없으면 lib가 사용됩니다.
    • 프로젝트 폴더에서 시작한 경우 해당 폴더 이름이 사용됩니다.

    폴더 제안에 라이브러리 이름이 접미사로 추가됩니다. 다음 표에는 Razor Pages 프로젝트에 jQuery를 설치하는 경우의 폴더 제안이 나와 있습니다.

    시작 위치 제안된 폴더
    프로젝트 루트(wwwroot가 있는 경우) wwwroot/lib/jquery/
    프로젝트 루트(wwwroot가 없는 경우) lib/jquery/
    프로젝트의 Pages 폴더 Pages/jquery/
  • 설치 단추를 클릭하여 구성에 따라 파일을 다운로드합니다libman.json.

  • 출력 창의 라이브러리 관리자 피드에서 설치 정보를 검토합니다. 예시:

    Restore operation started...
    Restoring libraries for project LibManSample
    Restoring library jquery@3.3.1... (LibManSample)
    wwwroot/lib/jquery/jquery.min.js written to destination (LibManSample)
    wwwroot/lib/jquery/jquery.js written to destination (LibManSample)
    wwwroot/lib/jquery/jquery.min.map written to destination (LibManSample)
    Restore operation completed
    1 libraries restored in 2.32 seconds
    

수동으로 LibMan 매니페스트 파일 항목 구성

Visual Studio의 모든 LibMan 작업은 프로젝트 루트의 LibMan 매니페스트(libman.json)의 콘텐츠를 기반으로 합니다. 수동으로 편집 libman.json 하여 프로젝트에 대한 라이브러리 파일을 구성할 수 있습니다. Visual Studio는 저장되면 libman.json 모든 라이브러리 파일을 복원합니다.

편집을 위해 열려 libman.json 면 다음 옵션이 있습니다.

  • 솔루션 탐색기 파일을 두 번 클릭합니다libman.json.
  • 솔루션 탐색기에서 프로젝트를 마우스 오른쪽 단추로 클릭하고 클라이언트 쪽 라이브러리 관리를 선택합니다.
  • Visual Studio 프로젝트 메뉴에서 클라이언트 쪽 라이브러리 관리를 선택합니다.

† 프로젝트 루트에 libman.json 파일이 아직 없으면 기본 항목 템플릿 콘텐츠로 만들어집니다.

Visual Studio는 색 지정, 서식 지정, IntelliSense, 스키마 유효성 검사 등 서식 있는 JSON 편집을 지원합니다. LibMan 매니페스트의 JSON 스키마는 https://json.schemastore.org/libman에 있습니다.

다음 매니페스트 파일을 사용할 경우 LibMan은 libraries 속성에서 정의된 구성에 따라 파일을 검색합니다. libraries 내에서 정의된 개체 리터럴에 대한 설명은 다음과 같습니다.

  • jQuery 버전 3.3.1의 하위 집합이 CDNJS 공급자에서 검색됩니다. 하위 집합은 files 속성(jquery.min.js, jquery.jsjquery.min.map)에서 정의됩니다. 파일은 프로젝트의 wwwroot/lib/jquery 폴더에 배치됩니다.
  • 부트스트랩 버전 4.1.3 전체가 검색되어 wwwroot/lib/bootstrap 폴더에 배치됩니다. 개체 리터럴의 provider 속성이 defaultProvider 속성 값을 재정의합니다. LibMan은 unpkg 공급자에서 부트스트랩 파일을 검색합니다.
  • 조직 내의 규제 기관이 Lodash의 하위 집합을 승인했습니다. 및 파일은 lodash.js C:\temp\lodash\의 로컬 파일 시스템에서 검색 lodash.min.js 됩니다. 프로젝트의 wwwroot/lib/lodash 폴더에 파일이 복사됩니다.
{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "jquery@3.3.1",
      "files": [
        "jquery.min.js",
        "jquery.js",
        "jquery.min.map"
      ],
      "destination": "wwwroot/lib/jquery/"
    },
    {
      "provider": "unpkg",
      "library": "bootstrap@4.1.3",
      "destination": "wwwroot/lib/bootstrap/"
    },
    {
      "provider": "filesystem",
      "library": "C:\\temp\\lodash\\",
      "files": [
        "lodash.js",
        "lodash.min.js"
      ],
      "destination": "wwwroot/lib/lodash/"
    }
  ]
}

참고 항목

LibMan은 각 공급자의 라이브러리마다 하나의 버전만 지원합니다. 지정된 공급자에 libman.json 대해 동일한 라이브러리 이름을 가진 두 개의 라이브러리가 포함된 경우 파일이 스키마 유효성 검사에 실패합니다.

라이브러리 파일 복원

Visual Studio 내에서 라이브러리 파일을 복원하려면 프로젝트 루트에 유효한 libman.json 파일이 있어야 합니다. 복원된 파일은 프로젝트에서 각 라이브러리의 지정된 위치에 배치됩니다.

다음 두 가지 방법으로 ASP.NET Core 프로젝트에서 라이브러리 파일을 복원할 수 있습니다.

  1. 빌드 중에 파일 복원
  2. 수동으로 파일 복원

빌드 중에 파일 복원

LibMan은 빌드 프로세스의 일부로, 정의된 라이브러리 파일을 복원할 수 있습니다. 기본적으로 ‘빌드 시 복원’ 동작은 사용되지 않습니다.

빌드 시 복원 동작을 사용하도록 설정하고 테스트하려면 다음을 수행합니다.

  • 솔루션 탐색기 마우스 오른쪽 단추를 클릭하고 libman.json상황에 맞는 메뉴에서 빌드 시 클라이언트 쪽 라이브러리 복원 사용을 선택합니다.

  • NuGet 패키지를 설치하라는 메시지가 표시되 면 단추를 클릭합니다. Microsoft.Web.LibraryManager.Build NuGet 패키지가 프로젝트에 추가됩니다.

    <PackageReference Include="Microsoft.Web.LibraryManager.Build" Version="1.0.113" />
    
  • 프로젝트를 빌드하여 LibMan 파일이 복원되는지 확인합니다. Microsoft.Web.LibraryManager.Build 패키지는 프로젝트의 빌드 작업 중에 LibMan을 실행하는 MSBuild 대상을 삽입합니다.

  • 출력 창의 빌드 피드에서 LibMan 활동 로그를 검토합니다.

    1>------ Build started: Project: LibManSample, Configuration: Debug Any CPU ------
    1>
    1>Restore operation started...
    1>Restoring library jquery@3.3.1...
    1>Restoring library bootstrap@4.1.3...
    1>
    1>2 libraries restored in 10.66 seconds
    1>LibManSample -> C:\LibManSample\bin\Debug\netcoreapp2.1\LibManSample.dll
    ========== Build: 1 succeeded, 0 failed, 0 up-to-date, 0 skipped ==========
    

빌드 시 복원 동작을 사용하도록 설정 libman.json 하면 상황에 맞는 메뉴에 빌드 시 클라이언트 쪽 라이브러리 복원 사용 안 함 옵션이 표시됩니다. 이 옵션을 선택하면 프로젝트 파일에서 Microsoft.Web.LibraryManager.Build 패키지 참조가 제거됩니다. 또한 각 빌드에서 클라이언트 쪽 라이브러리가 이제 복원되지 않습니다.

빌드 시 복원 설정에 관계없이 상황에 맞는 메뉴에서 언제든지 수동으로 복원할 libman.json 수 있습니다. 자세한 내용은 수동으로 파일 복원을 참조하세요.

수동으로 파일 복원

라이브러리 파일을 수동으로 복원하려면 다음을 수행합니다.

  • 솔루션의 모든 프로젝트에 대해 다음을 수행합니다.
    • 솔루션 탐색기에서 솔루션 이름을 마우스 오른쪽 단추로 클릭합니다.
    • 클라이언트 쪽 라이브러리 복원 옵션을 선택합니다.
  • 특정 프로젝트의 경우:
    • 솔루션 탐색기 파일을 마우스 오른쪽 단추클릭합니다libman.json.
    • 클라이언트 쪽 라이브러리 복원 옵션을 선택합니다.

복원 작업이 실행되는 동안

  • Visual Studio 상태 표시줄의 TSC(작업 상태 센터) 아이콘에 애니메이션이 적용되고 ‘복원 작업 시작됨’이 표시됩니다. 아이콘을 클릭하면 알려진 백그라운드 작업을 나열하는 도구 설명이 열립니다.

  • 상태 표시줄과 출력 창의 라이브러리 관리자 피드에 메시지가 전송됩니다. 예시:

    Restore operation started...
    Restoring libraries for project LibManSample
    Restoring library jquery@3.3.1... (LibManSample)
    wwwroot/lib/jquery/jquery.min.js written to destination (LibManSample)
    wwwroot/lib/jquery/jquery.js written to destination (LibManSample)
    wwwroot/lib/jquery/jquery.min.map written to destination (LibManSample)
    Restore operation completed
    1 libraries restored in 2.32 seconds
    

라이브러리 파일 삭제

Visual Studio에서 이전에 복원된 라이브러리 파일을 삭제하는 ‘정리’ 작업을 수행하려면 다음을 수행합니다.

  • 솔루션 탐색기 파일을 마우스 오른쪽 단추클릭합니다libman.json.
  • 클라이언트 쪽 라이브러리 정리 옵션을 선택합니다.

비라이브러리 파일이 실수로 제거되는 것을 방지하기 위해 정리 작업은 전체 디렉터리를 삭제하지 않습니다. 이전 복원에 포함된 파일만 제거합니다.

정리 작업이 실행되는 동안

  • Visual Studio 상태 표시줄의 TSC 아이콘에 애니메이션이 적용되고 ‘클라이언트 라이브러리 작업 시작됨’이 표시됩니다. 아이콘을 클릭하면 알려진 백그라운드 작업을 나열하는 도구 설명이 열립니다.
  • 상태 표시줄과 출력 창의 라이브러리 관리자 피드에 메시지가 전송됩니다. 예시:
Clean libraries operation started...
Clean libraries operation completed
2 libraries were successfully deleted in 1.91 secs

정리 작업은 프로젝트의 파일만 삭제합니다. 라이브러리 파일은 이후 복원 작업 시 빠르게 검색하기 위해 캐시에 유지됩니다. 로컬 컴퓨터의 캐시에 저장된 라이브러리 파일을 관리하려면 LibMan CLI를 사용합니다.

라이브러리 파일 제거

라이브러리 파일을 제거하려면 다음을 수행합니다.

  • libman.json을(를) 여십시오.

  • 해당 libraries 개체 리터럴 안에 캐럿을 배치합니다.

  • 왼쪽 여백에 표시되는 전구 아이콘을 클릭하고 <library_name>@<library_version> 제거를 선택합니다.

    Uninstall library context menu option

또는 LibMan 매니페스트(libman.json)를 수동으로 편집하고 저장할 수 있습니다. 파일을 저장하면 복원 작업이 실행됩니다. 더 이상 정의 libman.json 되지 않은 라이브러리 파일은 프로젝트에서 제거됩니다.

라이브러리 버전 업데이트

업데이트된 라이브러리 버전을 확인하려면 다음을 수행합니다.

  • libman.json을(를) 여십시오.
  • 해당 libraries 개체 리터럴 안에 캐럿을 배치합니다.
  • 왼쪽 여백에 표시되는 전구 아이콘을 클릭합니다. 업데이트 확인을 마우스로 가리킵니다.

LibMan은 설치된 버전보다 최신 라이브러리 버전이 있는지 확인합니다. 다음과 같은 결과가 발생할 수 있습니다.

  • 최신 버전이 이미 설치되어 있는 경우 업데이트를 찾을 수 없음 메시지가 표시됩니다.

  • 아직 설치되지 않은 경우 안정적인 최신 버전이 표시됩니다.

    Check for updates context menu option

  • 설치된 버전보다 더 최신 시험판을 사용할 수 있는 경우 시험판이 표시됩니다.

이전 라이브러리 버전으로 다운그레이드하려면 파일을 수동으로 편집합니다 libman.json . 파일을 저장하면 LibMan 복원 작업이 다음을 수행합니다.

  • 이전 버전에서 중복 파일을 제거합니다.
  • 새 버전에 있는 새 파일과 업데이트된 파일을 추가합니다.

추가 리소스