HTTP 200 OK

Memento mori & Carpe diem

REACT

npx란??

sjoongh 2022. 3. 30. 18:31

nvm : Node Version Manager

npm : Package Manager

npx : Package Runner

  • npm과 nvm은 유용하게 사용중이였지만 npx는 사용해본적이 없어 정리를 해보려고 한다.
  • npx는 npm의 5.2.0버전부터 새로 추가된 도구, 기본적으로 추가되어 있다.

 

현재 npm 버전에 이미 설치되어 있는지 확인

which npx

 

npx는 npm의 5.2.0버전부터 새로 추가된 도구, 기본적으로 추가되어 있다.

 

npm install
npm(Node Package Manager)은 프로젝트에 필요한 라이브러리를 다운로드 또는 관리 할 수 있도록 해주는 프로그램

 

프로젝트 npm install에 --save를 붙이는 이유는?
--save옵션은 package.json의 dependency항목에 모듈을 추가한다는 의미입니다.


하지만 npm5 부터는 --save 옵션을 기본 옵션으로 적용하게 되었습니다. 즉, --save를 사용하지 않아도 dependencies에 항목을 추가됩니다다. --save옵션은 더 이상 쓰지 않아도 기본으로 사용되는 기능입니다.

 

기존의 npm 방식

  1. 전역으로 패키지를 설치하여 의존성 라이브러리 관리
  2. 특정 프로젝트에만 의존성 라이브러리 설치

--> 전역과 로컬의 패키지를 따로 업데이트 및 관리 해줘야 했음

 

▶npm install 종류
(1) -P or --save-prod : package.json의 dependencies에 패키지를 등록합니다.(default)

(2) -D or --save-dev : package.json의 devDepndencies에 패키지를 등록합니다.

(3) -O or --save-optional : package.json의 optionalDependencies에 패키지를 등록합니다.

(4) --no-save : dependencies에 패키지를 등록하지 않습니다.

 

-D는 개발전용 dependency를 구성할 때 사용하고 -P는 배포버전용(build시 해당 플러그인이 포함됨) dependency를 구성할 때 사용합니다.

npx를 사용함으로써 효율적으로 관리할 수 있음

npx : 일회성으로 원하는 패키지를 npm레지스트리에 접근해서 실행시키고 설치하는 실행도구, 즉 npm 레지스토리에 올라가있는 최신 버전에 접근해 실행하고 설치하는 도구

npx 활용과 사용법

1) 로컬에 설치된 도구를 npm run script없이 사용

//Documents/npxTest/test/model.test.js
console.log("test!!!");

Mocha 패키지를 위한 파일인 Documents/npxTest/test/model.test.js 를 실행하기 위해선 Package.json에 'jest --runInBand ./test/model.test.js' 와 같은 명령어를 지정하거나 직접 입력해야 한다. 그러나 npx mocha 라고 치는 것 만으로 model.test.js 를 mocha를 사용하여 실행시킬 수 있다.

npx mocha를 수행하면 test.js의 내용이 실행되는 것을 확인하였다. npx mocha의 경우 무조건경로 안에 있는 test.js 라는 파일을 mocha로 무조건 실행시킬 수 있는 것으로 보인다.

2) 한 번만 사용할 명령 실행

//1. npm로 create-react-app
npm install -g create-react-app
create-react-app ihl-app

//2. npx로 create-react-app
npx create-react-app ihl-app

create-react-app와 같이 자주 사용하지 않는 무거운 패키지가 내 컴퓨터에 남는다는 점과 새로운 버전이 나왔을 때 이를 체크하여 이미 존재하는 패키지를 제거하고 재설치해야한다는 점이다. 사실 create-react-app 이라는 패키지는 리액트 프로젝트 생성시에만 사용하며 프로젝트 내에서는 사용하지 않기 때문에 이러한 패키지는 npx 명령어를 쓰는 것이 더 효율적일 것 같다.

3) 다른 node버전으로 node 실행

node test/model.test.js --> 기존 node버전으로 실행

npx -p node@7 -- node test/model.test.js --> 다른 노드버전으로 실행

npx는 -p 옵션을 사용해 패키지를 $PATH(환경변수)에 추가할 수 있으며 실행 후에는 $PATH에서 제거된다. 이를 이용하여 다른 node버전으로 node 명령을 실행할 수 있다.

4) 두 패키지의 결과를 합쳐서 실행

npx -p cowsay -p lolcatjs

cowsay, lolcatjs를 사용하기 위해 -p 옵션을 사용, 그 후 파이프로 cowsay결과에 lolcatjs를 적용.

'REACT' 카테고리의 다른 글

PostCSS  (0) 2022.04.10
[webpack] loader & plugin  (0) 2022.03.30
State and Lifecycle  (0) 2022.03.28
webpack 정리  (0) 2022.03.17
babel과 webpack  (0) 2022.01.19