Visual Studio 2017에서 MVC 프로젝트에 npm 도입

ASP.NET MVC에서는 자바스크립트 라이브러리로 Knockout.js이 포함된 시기가 계속되었습니다.

시간이 지남에 따라, Knockout 자체는 유지 보수되고 있지만, 대폭적인 버전 업은 되지 않는 것 같은 느낌이 되고 있습니다.
그 배경에서 현대적인 JavaScript 라이브러리와의 친화성이 없거나 좀처럼 사용하기 어려워졌습니다.
거기서, 최근의 메이저인 스택을 사용해 개수할 수 없는가와 여러가지 검토하고 있었는데, Vue.js 가 좋은 점이므로, ASP.NET MVC 프로젝트에 도입하는 방법을 정리했습니다.

Nuget으로 설치

당연히 처음에는 Nuget으로 설치를 시도했습니다. (이 단계에서 조금 불안했습니다만)
Visual Studio의 패키지 관리자에서 검색하고 먼저 본체를 설치.


그런 다음 형식 정의 파일도 설치합니다. (더 이상 순수한 JavaScript로 개발할 수없는 몸입니다)
불행히도 버전이 너무 오래되었습니다. 유지보수가 되지 않은 것 같습니다.


그리고 Nuget에서의 패키지 관리를 포기하게 되었습니다.

npm으로 설치

그렇다면 Vue.js 업데이트 사이트에있는 것처럼 보통 npm 패키지로 라이브러리를 관리하려고했습니다.
Visual Studio에서는 표준으로 npm을 지원하지 않는 것 같습니다. ( bower 는 있는데)

따라서 확장 기능으로 검색하면 "Package Installer"라는 기능이있었습니다.
다운로드 수도 훌륭합니다.

설치 방법

프로젝트를 마우스 오른쪽 버튼으로 클릭하고 Quick install Package를 선택합니다.
관리 패키지에서 npm을 선택하고 설치할 패키지 이름을 입력한 후 버전을 선택합니다.


안전하게 설치할 수있었습니다.
또한 자동으로 pacakge.json도 작성되어 MVC 프로젝트의 관리 대상이 됩니다.
설치된 node_modules 부하는 프로젝트 관리 대상에서 제외됩니다.

npm으로 관리되는 Vue.js는 기본적으로 형식 정의 파일을 지원하므로 문제 해결입니다.

재설치

pacakge.json을 마우스 오른쪽 버튼으로 클릭하고 "패키지 복원"을 선택하여 다시 설치할 수 있습니다.

앞으로 클래식한 ASP.NET MVC에서도 클라이언트 라이브러리는 npm 관리가 좋다.
이것으로, 하고 싶은 일 전부 할 수 있었습니다만, 향후는 태스크 러너라든지로 webpack라든지와 연동시켜 보려고 생각합니다.

다음 번은, Vue.JS 주위의 기사를 써 가려고 생각합니다.