Visual Studio에서 npm 패키지 관리

npm을 사용하면 Node.js와 ASP.NET Core 애플리케이션에서 사용할 패키지를 설치하고 관리할 수 있습니다. Visual Studio를 사용하면 쉽게 npm과 상호 작용하고 UI를 통해 또는 직접 npm 명령을 실행할 수 있습니다. npm에 익숙하지 않고 자세히 알아보려면 npm 설명서로 이동합니다.

npm과 Visual Studio의 통합은 프로젝트 형식에 따라 달라집니다.

• CLI 기반 프로젝트(.esproj)
• ASP.NET Core
• 폴더 열기(Node.js)

Important

npm에는 프로젝트 루트에 node_modules 폴더와 package.json이 필요합니다. 앱의 폴더 구조가 다른 경우 Visual Studio를 사용하여 npm 패키지를 관리하려면 폴더 구조를 수정해야 합니다.

CLI 기반 프로젝트(.esproj)

Visual Studio 2022부터 CLI 기반 프로젝트에 npm 패키지 관리자를 사용할 수 있으므로 이제 ASP.NET Core 프로젝트용 NuGet 패키지를 다운로드하는 방법과 비슷하게 npm 모듈을 다운로드할 수 있습니다. 그런 다음, package.json을 사용하여 패키지를 수정하고 삭제할 수 있습니다.

패키지 관리자를 열려면 솔루션 탐색기의 프로젝트에서 npm 노드를 마우스 오른쪽 단추로 클릭합니다.

다음으로, npm 패키지를 검색하고, 패키지를 선택하고, 패키지 설치를 선택하여 설치할 수 있습니다.

ASP.NET Core 프로젝트

ASP.NET Core 프로젝트와 같은 프로젝트의 경우 프로젝트에서 npm 지원을 추가하고 npm을 사용하여 패키지를 설치할 수 있습니다.

참고 항목

ASP.NET Core 프로젝트의 경우 npm 대신 라이브러리 관리자 또는 YARN을 사용하여 클라이언트 쪽 JavaScript 및 CSS 파일을 설치할 수도 있습니다. npm에서 제공하지 않는 패키지 관리를 위해 MSBuild 또는 dotnet CLI와 통합해야 하는 경우 이러한 옵션 중 하나가 필요할 수 있습니다.

프로젝트에 package.json 파일이 포함되어 있지 않다면 프로젝트에 package.json을 추가하여 npm 지원을 사용하도록 설정할 수 있습니다.

1. package.json 파일을 추가하려면 솔루션 탐색기에서 프로젝트를 마우스 오른쪽 단추로 클릭하고 추가>새 항목을 선택합니다(또는 Ctrl + SHIFT + A를 누릅니다). 검색 상자를 사용하여 npm 파일을 찾고, npm 구성 파일을 선택하고, 기본 이름을 사용하고, 추가를 클릭합니다.

2. package.json의 dependencies 또는 devDependencies 섹션에 하나 이상의 npm 패키지를 포함합니다. 예를 들어 파일에 다음을 추가할 수 있습니다.

   "devDependencies": {
      "gulp": "4.0.2",
      "@types/jquery": "3.5.29"
   }
   

   파일을 저장하면 Visual Studio가 솔루션 탐색기의 Dependencies / npm 노드 아래에 패키지를 추가합니다. 이 노드가 표시되지 않는다면 package.json을 마우스 오른쪽 단추로 클릭하고 패키지 복원을 선택합니다. 패키지 설치 상태를 보려면 출력 창에서 npm 출력을 선택하세요.

   package.json를 사용하여 npm 패키지를 구성할 수 있습니다. package.json을 직접 열거나 솔루션 탐색기에서 npm 노드를 마우스 오른쪽 단추로 클릭하고 package.json 열기를 선택합니다.

npm 패키지 문제 해결

• 앱 또는 변환 컴파일 TypeScript 코드를 빌드할 때 오류가 발생하는 경우 잠재적인 오류 원인으로 npm 패키지 비호환성을 확인합니다. 오류를 식별하려면 이 문서의 앞부분에서 설명한 대로 패키지를 설치할 때 npm 출력 창을 확인합니다. 예를 들어 npm 패키지 버전 중 하나 이상이 사용되지 않아 오류를 일으킬 경우 오류를 수정하려면 최신 버전을 설치해야 합니다. package.json을 사용하여 npm 패키지 버전을 제어하는 방법에 대한 자세한 내용은 package.json configuration을 참조하세요.

• 일부 ASP.NET Core 시나리오에서는 여기에 설명된 알려진 문제로 인해 솔루션 탐색기가 설치된 npm 패키지에 대한 올바른 상태를 표시하지 않을 수도 있습니다. 예를 들어 패키지가 설치되었지만 설치되지 않은 것으로 보일 수 있습니다. 대부분의 경우에는 package.json을 삭제하고 Visual Studio를 다시 시작한 다음 이 문서의 앞부분에서 설명한 것처럼 package.json 파일을 다시 추가하여 솔루션 탐색기를 업데이트할 수 있습니다. 또는 패키지를 설치할 때 npm 출력 창을 사용하여 설치 상태를 확인할 수 있습니다.

• 일부 ASP.NET Core 시나리오에서는 프로젝트를 빌드한 후 솔루션 탐색기의 npm 노드가 표시되지 않을 수 있습니다. 노드를 다시 표시하려면 프로젝트 노드를 마우스 오른쪽 단추로 클릭하고 Project 언로드를 선택합니다. 그런 다음 프로젝트 노드를 마우스 오른쪽 단추로 클릭하고 Project 다시 로드를 선택합니다.