npm 관리 라이브러리 버전 업그레이드 프로그램 요약

개요

  • npm로 관리하는 프로그램 라이브러리의 버전 업그레이드 방법을 총괄한다.
  • 또 이번에 어떤 샘플 프로젝트를 활용했는지 결과를 보면 이해하기 쉬우므로 https://github.com/creativetimofficial/vue-notus 여기를 이용해서 다음 절차를 시도하면서 결과를 쓴다.
  • 로컬 환경의 npm 버전 확인

  • 최신 버젼으로 확인됐습니다.
    최신 버전이 아니라면 version을 latest로 올린 뒤 버전 업그레이드를 하는 것이 좋습니다.
  • ❯ npm --version
    7.6.3
    

    현재 라이브러리의 version 확인


  • npm outdated 명령으로 현재 라이브러리의 버전과 부차적인 버전이 얼마나 올라갈지 확인하십시오.
  • npm outdated 설명

  • 현재 상태: 현재 설치된 버전
  • Wanted: 존재하는 버전의 패키지입니다.json에 기재된 semver 조건을 만족시키는 최신 버전
  • Latest: 패키지의 최신 버전
  • ❯ npm outdated
    Package                       Current         Wanted   Latest  Location                             Depended by
    @babel/core                   7.13.10        7.13.10  7.13.14  node_modules/@babel/core             vue-notus
    @babel/eslint-parser          7.13.10        7.13.10  7.13.14  node_modules/@babel/eslint-parser    vue-notus
    @popperjs/core                  2.9.1          2.9.1    2.9.2  node_modules/@popperjs/core          vue-notus
    @tailwindcss/forms              0.2.1          0.2.1    0.3.2  node_modules/@tailwindcss/forms      vue-notus
    @vue/cli-plugin-babel   5.0.0-alpha.7  5.0.0-alpha.7   4.5.12  node_modules/@vue/cli-plugin-babel   vue-notus
    @vue/cli-plugin-eslint  5.0.0-alpha.7  5.0.0-alpha.7   4.5.12  node_modules/@vue/cli-plugin-eslint  vue-notus
    @vue/cli-service        5.0.0-alpha.7  5.0.0-alpha.7   4.5.12  node_modules/@vue/cli-service        vue-notus
    @vue/compiler-sfc               3.0.7          3.0.7   3.0.11  node_modules/@vue/compiler-sfc       vue-notus
    chart.js                        2.9.4          2.9.4    3.0.2  node_modules/chart.js                vue-notus
    core-js                         3.9.1          3.9.1   3.10.0  node_modules/core-js                 vue-notus
    eslint                         7.22.0         7.22.0   7.23.0  node_modules/eslint                  vue-notus
    eslint-plugin-vue               7.7.0          7.7.0    7.8.0  node_modules/eslint-plugin-vue       vue-notus
    gulp-append-prepend             1.0.8          1.0.8    1.0.9  node_modules/gulp-append-prepend     vue-notus
    postcss                         8.2.8          8.2.8    8.2.9  node_modules/postcss                 vue-notus
    tailwindcss                     2.0.4          2.0.4    2.1.1  node_modules/tailwindcss             vue-notus
    vue                             3.0.7          3.0.7   2.6.12  node_modules/vue                     vue-notus
    vue-router                      4.0.5          4.0.5    3.5.1  node_modules/vue-router              vue-notus
    

    버전 업데이트(이번에는 이터레이션만 업데이트됩니다.)


  • 전 세계에 npm-check-updates라는 프로그램 라이브러리를 설치하고 ncu 명령을 사용하며 주요 버전은 고정되어 있고 이터레이션만 최신이다.
  • npm 업데이트 명령을 왜 사용하지 않습니까?제이슨의 개작이 안 돼서요.
  • npm-check-updates 설치 방법


    npm i -g npm-check-updates
    

    npm-check-updates를 사용하여 이터레이션만 업데이트


    ❯ ncu -u --target minor
    Upgrading /Users/yoshitaka.koitabashi/Desktop/vue-notus/package.json
    [====================] 21/21 100%
    
     @popperjs/core                  2.9.1  →          2.9.2
     @tailwindcss/forms              0.2.1  →          0.3.2
     @vue/compiler-sfc               3.0.7  →         3.0.11
     core-js                         3.9.1  →         3.10.0
     gulp-append-prepend             1.0.8  →          1.0.9
     tailwindcss                     2.0.4  →          2.1.1
     vue                             3.0.7  →         3.0.11
     vue-router                      4.0.5  →          4.0.6
     @babel/core                   7.13.10  →        7.13.14
     @babel/eslint-parser          7.13.10  →        7.13.14
     @vue/cli-plugin-babel   5.0.0-alpha.7  →  5.0.0-alpha.8
     @vue/cli-plugin-eslint  5.0.0-alpha.7  →  5.0.0-alpha.8
     @vue/cli-service        5.0.0-alpha.7  →  5.0.0-alpha.8
     eslint                         7.22.0  →         7.23.0
     eslint-plugin-vue               7.7.0  →          7.8.0
     postcss                         8.2.8  →          8.2.9
    
    Run npm install to install new versions.
    

    package.json이 업데이트되었으므로 이 상태에서 npm install 명령을 실행합니다


    ❯ npm install
    
    up to date, audited 1580 packages in 3s
    
    117 packages are looking for funding
      run `npm fund` for details
    
    found 0 vulnerabilities
    

    npm install에서 error를 뱉는 경우

  • 의존 관계를 해결하지 못해 오류가 발생하면 npm audit fix-force 명령을 통해 자동으로 수정할 수 있습니다.
  • > npm audit fix --force
    

    업데이트된 라이브러리 버전 확인


  • npmls 명령을 통해 프로그램 라이브러리의 버전이 상승했음을 확인합니다.
  • ❯ npm ls
    [email protected] /Users/yoshitaka.koitabashi/Desktop/vue-notus
    ├── @babel/[email protected]
    ├── @babel/[email protected]
    ├── @fortawesome/[email protected]
    ├── @popperjs/[email protected]
    ├── @tailwindcss/[email protected]
    ├── @vue/[email protected]
    ├── @vue/[email protected]
    ├── @vue/[email protected]
    ├── @vue/[email protected]
    ├── [email protected]
    ├── [email protected]
    ├── [email protected]
    ├── [email protected]
    ├── [email protected]
    ├── [email protected]
    ├── [email protected]
    ├── [email protected]
    ├── [email protected]
    ├── [email protected]
    ├── [email protected]
    └── [email protected]
    

    창고의 감찰을 볼 수 있기 때문에 결과를 확인할 수 있다


  • npm audit 명령을 통해 프로그램 라이브러리의 감찰을 실시하여 그 결과를 확인할 수 있다.
  • ❯ npm audit
    found 0 vulnerabilities
    

    의존 관계의 감사 결과 취약성이 세베리티:하이일 때의 대응


  • npm audit fix 명령을 실행하여 의존 관계의 취약성을 자동으로 처리할 수 있습니다.
  • > npm audit fix --force
    

    좋은 웹페이지 즐겨찾기