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 버전을 예로 든 명령어다.