[vue] package.json NPM Package 관리, 업데이트 방법

vue 공부를 하다보면 책과 오픈소스로 공부하게 되는데, package.json의 dependencies, DevDependencies 버전관리가 전부 다르다. 여기서 dependencies는 배포 환경의 의존성, DevDependencies는 로컬 개발환경의 의존성이다. 배포할때 없으면 안되는 필수 의존성(vue, vue-router, vuex ... 등) 을 dependencies에 넣고, 개발환경에만 필요한 의존성은 DevDependencies에 넣는다. (배포,로컬 어디다 배치하는 부분은 삽질을 여러번 해봐야 할 것 같다)

 

나같은 경우는 아직 공부중이라 dependencies는 이렇게 배치해봤는데, 여기서 더 줄여서 개발환경으로 옮겨도 될것같다. 

배포환경의 의존성을 줄이는 이유는 보기 편하라고도 있지만, 배포 환경에서 해당 프로젝트를 Import 해서 빌드할 경우 개발할때만 필요했던 의존성을 굳이 설치할 이유가 없고, depndencies에만 정의했던 의존성만 빠르게 빌드하여 배포할 수 있다. 

 

공부하면서 나눠본 dependencies / devDependencies

  "dependencies": {
    "axios": "^1.4.0",
    "build": "^0.1.4",
    "core-js": "^3.8.3",
    "jquery": "^3.7.0",
    "popper.js": "^1.16.1",
    "vue": "^3.0.0-rc.5",
    "vue-loader": "^17.2.2",
    "vue-router": "^4.0.13",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@types/bootstrap": "^5.2.6",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-plugin-e2e-nightwatch": "^3.0.1",
    "@vue/cli-plugin-unit-jest": "^3.0.1",
    "@vue/cli-service": "^5.0.8",
    "@vue/test-utils": "^1.0.0-beta.20",
    "@vuelidate/core": "^2.0.2",
    "@vuelidate/validators": "^2.0.2",
    "vue-template-compiler": "^2.7.14",
    "babel-jest": "^23.0.1",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.0.3",
    "moxios": "^0.4.0",
    "prettier": "^2.4.1",
    "node-sass": "^4.9.0",
    "sass": "^1.63.4",
    "sass-loader": "^13.3.2",
    "vue-style-loader": "^4.1.3",
    "bootstrap": "^5.3.0",
    "bootstrap-icons": "^1.10.5"
  },

배포 의존성만 설치 명령어

npm -i --production

 

 

NPM 패키지 업데이트

위에서 package.json 패키지를 나눠봤다면 버전관리를 어떻게 할 지 궁금해졌다. 공부하면서 참고한 책과 블로그, 오픈소스에서는 버전이 낮은 편이다.  물론 그대로 사용해도 에러가 안나면 상관이 없지만, 버전이 또 설치된거랑 안 맞으면 에러가 나서 골치가 아프다. 그래서 패키지를 최신으로 업데이트해서 사용해보기로 하고 업데이트 방법을 정리하기로 했다.

 

• 순서1. package.json에 등록된 의존성 업데이트

$ npm i -g npm-check-updates

 

• 순서2. 업데이트전 패키지별 변경사항 확인(package.json 바뀔내용)

$ ncu

 

• 순서3. 업데이트 진행(package.json의 내용만 바뀜)

$ ncu -u

 

• 순서4. 변경된 패키지 설치

$ npm install

 

• 번외 : 업데이트가 필요한 패키지 확인

npm outdated