npm을 사용하면 Node.js 및 ASP.NET Core 애플리케이션 모두에서 사용할 패키지를 설치하고 관리할 수 있습니다. Visual Studio를 사용하면 쉽게 npm과 상호 작용하고 UI를 통해 또는 직접 npm 명령을 실행합니다. npm에 익숙하지 않은 경우 npm 설명서로 이동하세요.
Visual Studio와 npm의 통합은 프로젝트 유형에 따라 다릅니다.
중요합니다
npm에는 프로젝트 루트의 node_modules 폴더 및 package.json 예상합니다. 앱의 폴더 구조가 다른 경우 Visual Studio를 사용하여 npm 패키지를 관리하려면 폴더 구조를 수정해야 합니다.
CLI 기반 프로젝트(.esproj)
Visual Studio 2022부터 CLI 기반 프로젝트에 npm 패키지 관리자를 사용할 수 있으므로 이제 ASP.NET Core 프로젝트에 대한 NuGet 패키지를 다운로드하는 방법과 유사하게 npm 모듈을 다운로드할 수 있습니다. 그런 다음 package.json 사용하여 패키지를 수정하고 삭제할 수 있습니다.
패키지 관리자를 열려면 솔루션 탐색기에서 프로젝트에서 npm 노드를 마우스 오른쪽 단추로 클릭하고 npm 패키지 추가를 선택합니다.
다음으로, npm 패키지를 검색하고, 패키지를 선택하고, 패키지 설치를 선택하여 설치할 수 있습니다.
Node.js 프로젝트
Node.js 프로젝트(.njsproj)의 경우 다음 작업을 수행할 수 있습니다.
이러한 기능은 함께 작동하며 프로젝트의 프로젝트 시스템 및 package.json 파일과 동기화됩니다.
필수 조건
프로젝트에 npm 지원을 추가하려면 Node.js 개발 워크로드 및 Node.js 런타임이 설치되어 있어야 합니다. 자세한 단계는 Node.js 및 Express 앱 만들기를 참조하세요.
비고
기존 Node.js 프로젝트의 경우 기존 Node.js 코드 솔루션 템플릿 또는 Open 폴더(Node.js) 프로젝트 형식을 사용하여 프로젝트에서 npm을 사용하도록 설정합니다.
솔루션 탐색기에서 패키지 설치(Node.js)
Node.js 프로젝트의 경우 npm 패키지를 설치하는 가장 쉬운 방법은 npm 패키지 설치 창을 사용하는 것입니다. 이 창에 액세스하려면 프로젝트에서 npm 노드를 마우스 오른쪽 단추로 클릭하고 새 npm 패키지 설치를 선택합니다.
이 창에서 패키지를 검색하고, 옵션을 지정하고, 설치할 수 있습니다.
- 종속성 유형 - 표준, 개발 및 선택적 패키지 중에서 선택합니다. 표준은 패키지가 런타임 종속성임을 지정하는 반면 Development는 개발 중에만 패키지가 필요함을 지정합니다.
- package.json추가 - 권장합니다. 이 구성 가능한 옵션은 더 이상 사용되지 않습니다.
- 선택한 버전 - 설치하려는 패키지의 버전을 선택합니다.
-
기타 npm 인수 - 다른 표준 npm 인수를 지정합니다. 예를 들어 버전 목록에서 사용할 수 없는 특정 버전을 설치하는 것과 같은
@~0.8버전 값을 입력할 수 있습니다.
출력 창의 npm 출력에서 설치 진행률을 확인할 수 있습니다(창을 열려면출력> 선택하거나 Ctrl + Alt + O를 누릅니다). 시간이 좀 걸릴 수 있습니다.
팁 (조언)
검색 쿼리 앞에 관심 있는 범위(예 @types/mocha : 형식을 입력하여 모카에 대한 TypeScript 정의 파일 찾기)를 추가하여 범위가 지정된 패키지를 검색할 수 있습니다. 또한 TypeScript에 대한 형식 정의를 설치할 때 npm 인수 필드에 버전(예: @ts2.6)을 지정하여 대상으로 지정하는 TypeScript 버전을 지정할 수 있습니다.
솔루션 탐색기에서 설치된 패키지 관리(Node.js)
npm 패키지는 솔루션 탐색기에 표시됩니다. npm 노드 아래의 항목은 package.json 파일의 종속성을 모방합니다.
패키지 상태
-
- package.json 설치 및 나열 -
- 설치되었지만 package.json 명시적으로 나열되지 않음 -
- 설치되지 않았지만 package.json에 나열된 상태입니다
npm 노드를 마우스 오른쪽 단추로 클릭하여 다음 작업 중 하나를 수행합니다.
- 새 npm 패키지 설치 UI를 열어 새 패키지를 설치합니다.
-
npm 패키지 설치 npm install 명령을 실행하여 package.json나열된 모든 패키지를 설치합니다. (
npm install을 실행합니다.) -
npm 패키지 업데이트package.json지정된 SemVer(의미 체계 버전 관리) 범위에 따라 패키지를 최신 버전으로 업데이트합니다.
npm update --save를 실행합니다. SemVer 범위는 일반적으로 "~" 또는 "^"를 사용하여 지정됩니다. 자세한 내용은 package.json 구성입니다.
패키지 노드를 마우스 오른쪽 단추로 클릭하여 다음 작업 중 하나를 수행합니다.
-
npm 패키지 설치 npm install 명령을 실행하여 package.json나열된 패키지 버전을 설치합니다. (
npm install을 실행합니다.) -
npm 패키지 업데이트package.json지정된 SemVer 범위에 따라 패키지를 최신 버전으로 업데이트합니다. (실행
npm update --save.) SemVer 범위는 일반적으로 "~" 또는 "^"를 사용하여 지정됩니다. -
npm 패키지 제거 패키지를 제거하고 package.json 제거합니다(실행
npm uninstall --save.)
비고
npm 패키지 문제를 해결하는 데 도움이 되는 내용은 문제 해결을 참조하세요.
Node.js 대화형 창(Node.js)에서 .npm 명령을 사용합니다.
Node.js 대화형 창의 명령을 사용하여 .npm npm 명령을 실행할 수도 있습니다. 창을 열려면 솔루션 탐색기에서 프로젝트를 마우스 오른쪽 단추로 클릭하고 Node.js 대화형 창 열기 를 선택하거나 Ctrl + K, N을 누릅니다.
창에서 다음과 같은 명령을 사용하여 패키지를 설치할 수 있습니다.
.npm install azure@4.2.3
팁 (조언)
기본적으로 npm은 프로젝트의 홈 디렉터리에서 실행됩니다. 솔루션에 여러 프로젝트가 있는 경우 프로젝트의 이름 또는 경로를 대괄호로 지정합니다.
.npm [MyProjectNameOrPath] install azure@4.2.3
팁 (조언)
프로젝트에 package.json 파일이 .npm init -y 없는 경우 기본 항목을 사용하여 새 package.json 파일을 만듭니다.
ASP.NET 핵심 프로젝트
ASP.NET Core 프로젝트와 같은 프로젝트의 경우 프로젝트에 npm 지원을 추가하고 npm을 사용하여 패키지를 설치할 수 있습니다.
비고
ASP.NET Core 프로젝트의 경우 npm 대신 Library Manager 또는 yarn을 사용하여 클라이언트 쪽 JavaScript 및 CSS 파일을 설치할 수도 있습니다. npm에서 제공하지 않는 패키지 관리를 위해 MSBuild 또는 dotnet CLI와 통합해야 하는 경우 이러한 옵션 중 하나가 필요할 수 있습니다.
프로젝트에 package.json 파일이 아직 포함되어 있지 않은 경우 프로젝트에 package.json 파일을 추가하여 npm 지원을 사용하도록 설정할 수 있습니다.
package.json 파일을 추가하려면 솔루션 탐색기에서 프로젝트를 마우스 오른쪽 단추로 클릭하고새 항목>를 선택하거나 Ctrl + Shift + A를 누릅니다. 검색 상자를 사용하여 npm 파일을 찾고, npm 구성 파일을 선택하고, 기본 이름을 사용하고, 추가를 클릭합니다.
또는 섹션에 하나 이상의 npm 패키지를 package.json 에 포함하십시오. 예를 들어 파일에 다음을 추가할 수 있습니다."devDependencies": { "gulp": "4.0.2", "@types/jquery": "3.5.29" }파일을 저장하면 Visual Studio는 솔루션 탐색기의 종속성/npm 노드 아래에 패키지를 추가합니다. 노드가 표시되지 않으면package.json마우스 오른쪽 단추 로 클릭하고 패키지 복원을 선택합니다. 패키지 설치 상태를 보려면 출력 창에서 npm 출력을 선택합니다.
비고
npm 노드는 Blazor를 포함하여 대부분의 ASP.NET Core 프로젝트 형식에 사용할 수 있습니다. MAUI Blazor 프로젝트의 경우 솔루션 탐색기에 npm 노드가 없으므로 npm 명령줄을 사용해야 합니다.
를 사용하여
package.jsonnpm 패키지를 구성할 수 있습니다. 직접package.json를 열거나 Solution Explorer에서 npm 노드를 마우스 오른쪽 단추로 클릭하고 package.json 열기를 선택합니다.
npm 패키지 문제 해결
앱을 빌드하거나 TypeScript 코드를 변환할 때 오류가 표시되는 경우 잠재적 오류 원인으로 npm 패키지 비호환성을 확인합니다. 오류를 식별하려면 이 문서의 앞에서 설명한 대로 패키지를 설치할 때 npm 출력 창을 확인합니다. 예를 들어 하나 이상의 npm 패키지 버전이 더 이상 사용되지 않으며 오류가 발생하는 경우 오류를 해결하려면 최신 버전을 설치해야 할 수 있습니다. package.json 사용하여 npm 패키지 버전을 제어하는 방법에 대한 자세한 내용은 package.json 구성을 참조하세요.
일부 ASP.NET Core 시나리오에서 솔루션 탐색기는 여기에 설명된 알려진 문제로 인해 설치된 npm 패키지에 대한 올바른 상태를 표시하지 않을 수 있습니다. 예를 들어 패키지가 설치될 때 설치되지 않은 것으로 표시될 수 있습니다. 대부분의 경우 이 문서의 앞부분에서 설명한 대로 package.json삭제하고, Visual Studio를 다시 시작하고, package.json 파일을 다시 추가하여 솔루션 탐색기를 업데이트할 수 있습니다. 또는 패키지를 설치할 때 npm 출력 창을 사용하여 설치 상태를 확인할 수 있습니다.
일부 ASP.NET Core 시나리오에서는 프로젝트를 빌드한 후 솔루션 탐색기의 npm 노드가 표시되지 않을 수 있습니다. 노드를 다시 표시하려면 프로젝트 노드를 마우스 오른쪽 단추로 클릭하고 프로젝트 언로드 를 선택합니다. 그런 다음 프로젝트 노드를 마우스 오른쪽 단추로 클릭하고 프로젝트 다시 로드를 선택합니다.
- Node.js 프로젝트의 경우 npm 지원을 위해 Node.js 개발 워크로드가 설치되어 있어야 합니다. npm에는 Node.js필요합니다. Node.js 설치하지 않은 경우 외부 프레임워크 및 라이브러리와의 최상의 호환성을 위해 Node.js 웹 사이트에서 LTS 버전을 설치하는 것이 좋습니다.