package.json의 종속성을 최신버전으로 업데이트하는 방법

npm이나 yarn으로 패키지를 추가하게 되면 node_modules폴더에 실제 패키지가 설치되면서 package.json파일에 기록을 하게 됩니다.
일반적으로 npm install 패키지명 --save 이런 명령어를 대부분사용할 텐데요. 그럴경우 package.jsondependenciesdevDependencies에는 "grunt": "^1.0.3" 이런식으로 현재 패키지의 최신 버전이 설치가 됩니다.
이렇게 설치된 package.json 파일에 대해 아무리 명령어로 upgrade를 하더라도 해당 버전보다 높은 버전이 설치되지 않습니다. 만약 하려면 일일이 패키지별로 설치를 따로 해줘야 하는 불편함이 있는데요. 이것을 한방에 업데이트를 시켜주는 패키지가 있습니다.

npm-check-updates

npm-check-updates는 package.jsondependenciesdevDependencies에 기록되어 있는 각 패키지들을 현재기준으로 최신버전으로 업데이트를 시켜 줍니다.

설치

일반적으로 npm 패키지 처럼 설치하면 됩니다. 다만 global로 설치를 하는 것이 패키지 목적에 더 부합할 것 같습니다.

$ npm install -g npm-check-updates

사용법

ncu를 CLI로 입력을 하면 실제 package.json이 업데이트가 되는 것이 아니라 업데이트 되는 항목을 보여줍니다.
ncu -u를 CLI로 입력을 하면 package.jsondependenciesdevDependencies에 있는 각 패키지들이 최신버전으로 변경이 됩니다. 이때 실제로 node_modules폴더에 패키지가 변경되는 것이 아니므로 npm install을 실행해서 실제로 패키지를 변경해 주면 됩니다.

$ ncu -u
$ npm install 

사용 전

사용전 devDependencies의 각 패키지를 보면 버전이 아래 버전인 것을 볼 수 있습니다.

"devDependencies": {
    "autoprefixer": "^6.3.7",
    "autoprefixer-core": "^5.2.1",
    "cssnano": "^3.7.1",
    "grunt": "^0.4.5",
    "grunt-babel": "^5.0.0"
}

사용 후

ncu -u 사용후에는 각 패키지의 버전이 다들 올라간것을 볼 수 있습니다.

  "devDependencies": {
    "autoprefixer": "^8.6.4",
    "autoprefixer-core": "^6.0.1",
    "cssnano": "^4.0.0",
    "grunt": "^1.0.3",
    "grunt-babel": "^7.0.0",
}

Similar Posts

  • 웹디자이너라면 꼭 알아야 할 Flexbox Layout

    웹디자인을 하면서 레이아웃을 잡는 방법에 대해서 시대별로 많은 변화가 있었습니다. Web이 나오기 시작한 초창기에는 Table을 이용하여 화면의 레이아웃을 잡았고 웹표준, 웹접근성이 이슈화 되면서 시멘틱한 마크업이 대세가 되면서 CSS의 DIV를 이용한 방법으로 레이아웃을 잡았습니다. CSS3로 버전업이 되면서 레이아웃 구현애 대한 방법으로 Flexbox가 탄생하게 되었고 2017년 현재 레이아웃을 편리하게 구현하기 위해서는 Flexbox를 사용하여 구현하는 것이 최선이라 할 […]

  • CSS로 그럴듯한 버튼효과를 내보자

    별도의 라이브러리를 사용하지 않고 순수하게 CSS3만을 활용하여 버튼의 효과를 줄 수 있습니다. 급하게 퍼블리싱할때 써먹을 수 있게 정리해 놓겠습니다. 미리보기 BUTTON 1 BUTTON 2 BUTTON 3 BUTTON 4 코드설명 HTML HTML은 기본 버튼을 사용하고 .btn으로 기본속성을 지정하고 .hover로 효과의 형태를 변경하겠습니다. <button class=”btn hover1″> BUTTON 1 </button> <button class=”btn hover2″> BUTTON 2 </button> <button class=”btn […]

  • 구글 스프레드시트에서 콤보박스 적용하기

    MS 엑셀을 대체할 만한 제품 중에 구글 스프레드시트는 좋은 대안이 될 수 있습니다. 물론 MS 엑셀의 파워풀한 기능을 모두 사용할 수는 없지만 웬만한 기능은 동일하게 구현이 가능합니다. 더욱이 인터넷만 된다면 어디에서든지 사용할 수 있고 스마트폰에서도 무료로 사용이 가능하기 때문에 상당한 이점이 있습니다. 엑셀의 기능 중에 콤보박스 기능을 구글 스프레드시트에서도 쉽게 구현을 할 수 있습니다.. 콤보박스 […]

  • 발렛파킹도 로봇이!! stan

    저희 아파트는 지은지 벌써 15년이 넘고 있어서 그런지 주차공간이 매우 협소한 편입니다. 항상 문콕테러를 걱정하면서 주차를 하게 됩니다. 물론 빨리 법이 바뀌어서 주차영역이 코스트코 만큼이나 넓게 지정이 되어야 겠지만 그럴경우 발생하는 또다른 문제는 주차할 수 있는 차량의 수가 상대적으로 줄어든다는데 있습니다. 이번에 이런문제를 말끔히 해결해 줄 발렛파킹을 해주는 로봇이 나와서 소개를 할까 합니다. 스탠리 로보틱스(Stanley […]

  • 유튜버 진출의 최대 고민이였던 더빙을 해결해 줄 네이버 클로바 더빙 출시

    한때 유튜버를 꿈꿨으나 그지같은 목소리 때문에 포기했어야 했던 꿈을 이제 다시한번 불태워 볼 기회가 생겼습니다. 네이버에서 출시한 클로바 더빙이 그 꿈을 실현해줄 무기입니다. 이번에 야심차게 출시를 하고 현재는 알리기 위한 이벤트를 진행중에 있는데요. 예전의 기계적인 톤의 TTS보다 정말 한단계 진일보한, 느낌있는 목소를 들려주고 있습니다. 또한 동영상과 매칭을 시켜주고 있어서 더욱 활용도가 있어 보입니다. 클로바 더빙 […]

  • 시놀로지 DSM7.0!! 좋아진 점 5가지

    RAM을 16 Gbyte로 잘못 업그레이드하는 바람에 5개월 동안 개고생 하다가 겨우겨우 복구해서 초기화한 김에 DSM 7.0 베타버전을 설치해 봤습니다. 시놀로지의 장점이라고 한다면 하드웨어에 못지않은 강력한 소프트웨어를 가지고 있다는 것입니다. 그것의 기반이 되는 것이 DSM(DiskStation Manager)인데 2020년까지는 DSM 버전이 6.2였으며 21년도에 7.0으로 오픈을 목적으로 현재 베타 버전을 제공하고 있습니다. 베타버전이기는 하지만 DSM 7.0을 사용해 보면서 느낀 […]

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다