[vue] npm install 명령어 정리

vue 공부를 하다보니 정말이지 환경설정 잡는게 제일 어려운것 같다. 각 패키지 버전이 안맞으면 계속 에러나고, 에러를 잡고 다른 패키지 설치하면 또 에러가 나고 그래서 NPM 설치 명령어 정리를 해야겠다. 모든 옵션은 레퍼런스를 참고하면 되고, 내가 사용해본 옵션들 위주로 정리해본다.

 

 

NPM install (전체 설치)

• npm install
• npm i

package.json에 정의된 모든 패키지를 설치한다.(dependencies와 devDependencies ALL), 에러가 나거나 프로젝트를 시작할때, 재빌드할때, 배포환경에서 빌드할때 등의 상황에서 사용.

 

 

NPM uninstall (패키지 삭제)

• npm uninstall vue-loader
• npm rm vue-loader

패키지를 제거할때 사용된다. 해당 옵션을 사용하면 package.json에 정의된 패키지와 node_modules 폴더안의 해당 패키지가 삭제된다.

 

 

NPM -g 옵션 (전역 설치)

• npm install -global vue@next
• npm install -g vue@next

전역 설치라 함은 프로젝트 전체에서 사용할 수 있게 설치한다는 뜻. -g를 안붙이면 해당 프로젝트내에서만 사용가능하다.

OS에 따라 전역 설치된 패키지는 해당 경로에 저장된다.

• 윈도우(Window)의 경우
  c:\Users\%USERNAME%\AppData\Roaming\npm\node_modules
• macOS의 경우
  /usr/local/lib/node_modules

 

 

NPM --save 옵션 (package.json에 저장)

• npm install eslint --save

패키지 설치 후 package.json에 저장하는 옵션.  node_module 폴더를 삭제 해도 package.json에 패키지가 정의되있기 때문에 npm install시 재 설치 가능하다. NPM5 버전부터는 자동으로 --save 옵션이 포함되어 있어, 최신 버전으로 설치한 분들은 굳이 이 옵션을 붙이지 않아도 된다.

 

 

NPM -D 옵션 (devDependencies에 설치)

• npm install case-sensitive-paths-webpack-plugin -D
• npm install case-sensitive-paths-webpack-plugin -dev

위와 같이 설치할 패키지명 뒤나 install 다음에 -D 를 붙이면 된다. save 옵션을 추가할 경우 --save-dev 로 사용하면 된다.

 

 

NPM @버전명 (특정 버전 설치)

• npm install eslint@^7.32.0

위와 같이 설치할 패키지 뒤에 @버전명을 붙이면 된다.

 

 

NPM v 옵션 (패키지 버전명 확인)

• npm view vue-router
• npm v vue-router

하단의 dist-tags 에는 edge, latest, legacy, next 버전이 포함됨. npm install시 @edge 나 @next등을 붙이면 해당 버전으로 설치 가능. 대신 dist tags에 명시된 버전이 없는 경우 타겟을 못 찾아 설치가 안될 수 있음.

 

 

NPM @next (버전설치 예시)

• npm install vue-router@next

npm view로 dist tags 읽었던 부분에서 next 버전을 예로 든 명령어다.