본문으로 건너뛰기

npm vs npx

작성일 : 2024.10.22

React, Vue 등 프로젝트를 초기세팅할 때 npm을 사용하는데, npm과 npx 둘의 개념이 헷갈려서 작성하는 글

NPM이란?​

NPM (Node Package Manager)​

  • npm 은 노드 패키지 관리자를 뜻한다.
  • javascript로 작성되어있다.
  • npm 은 node.js의 모든 패키지와 모듈을 관리하며 CLI 클라이언트 npm으로 구성된다.
  • node.js를 설치하면 시스템에 설치된다.
  • Node 프로젝트의 필수 패키지 및 모듈은 npm을 사용하여 설치된다.
  • 패키지에는 모듈에 필요한 모든 파일이 포함되어 있다.
  • 모듈은 프로젝트 요구사항에 따라 Node 프로젝트에 포함될 수 있는 Javascript 라이브러리이다.
로컬 npm 설치​
{
    "name": "Your app",
    "version":  "1.0.0",
    "scripts":  {
            "your-package":  "your-package-name"
     }
}

작성한 npm 패키지 설치하기 위해 아래 명령어를 터미널에서 실행

$ npm run your-package-name

NPX이란?​

NPX (Node Package eXecute)​

  • npm 5.2.0 버전 이상부터 npm을 설치하면 자동으로 npx 가 설치된다.
  • 즉, 새로운 패키지 관리 모듈이 아닌, npm의 5.2.0버전부터 새로 추가된 도구이다. 따라서 npm과 비교대상이 아니라, npm을 좀 더 편하게 사용하기 위해 npm 제공해주는 하나의 도구이다.
  • 패키지를 설치하지 않고도 npm 레지스트리에서 원하는 패키지를 실행(Excute) 할 수 있다.
  • 실행 즉, npm package runner 로써 npx는 일회용 패키지 로써 사용된다.

npx 등장 배경​

npm 으로 패키지를 설치할 때, 두 가지 케이스가 있다.

  • 전역으로 패키지를 설치하여 의존성 라이브러리들을 전체적으로 관리하는 방법
  • 특정 프로젝트에만 의존성 라이브러리를 설치하는 방법

의존성 라이브러리(Dependency) 들이 전역이나 로컬에 설치된 채 관리가 되면 어떤 문제가 있을까 ?

  • 패키지가 업데이트 된다면 ?
  • 전역으로 관리되고 있는 패키지도 따로 업데이트해주고, 로컬로 관리되고 있는 패키지도 따로 업데이트하면 굉장히 번거로울 것이다.
  • 가뜩이나 변화무쌍한 Javascript 생태계에서는 더욱 관리가 쉽지 않을 것이다.

이러한 문제를 해결할 수 있는 도구가 바로 npx 이다.

내가 패키지를 설치하고 업데이트를 하지 않더라도, npm 레지스트리에 올라가 있는 최신 버전을 실행시키고 설치만 시키면 끝이다.

npx 사용 경우​

  • npm run-script를 사용하지 않고 로컬에 설치된 패키지를 사용할 경우
  • 일회성 명령으로 패키지를 실행할 경우
  • gist-based scripts 를 실행할 경우
  • 특정 노드 버전의 스크립트를 실행할 경우

정리​

npmnpx
npm을 통해 패키지를 실행하려면 package.json에 해당 패키지를 지정하고 로컬에 설치해야 한다패키지는 패키지를 설치하지 않고도 실행할 수 있으며, npm 패키지 러너이므로 아직 설치되지 않은 패키지가 있으면 자동으로 설치된다.
npm에서 create-react-app을 사용하려면 npm install create-react-app 다음 create-react-app myApp 명령을 사용한다그러나 npx에서는 npx create-react-app myApp처럼 설치하지 않고 사용할 수 있다. 이 명령은 모든 앱의 수명주기에서 한번만 필요하다
npm은 패키지를 설치하는데 사용하는 도구npx는 패키지를 실행하는 데 사용하는 도구
npm에서 사용하는 패키지는 전역적으로 설치npx에서 사용하는 패키지는 전역적으로 설치되지 않는다.
npm : 패키지 관리자 , 전역적
npx : 패키지 실행자 , 일회성