방금 React를 배우기 시작했으며 Facebook은 다음과 같은 기성품 프로젝트를 제공하여 초기 설정을 단순화하는 데 도움을줍니다 .

스켈레톤 프로젝트를 설치해야하는 경우 npx create-react-app my-app명령 행 을 입력해야합니다 .

나는 왜 Github의에서 페이스 북이 한 않습니다 궁금 npx create-react-app my-app보다는 npm create-react-app my-app?

npx 소개 : npm 패키지 러너

NPM- 패키지를 관리 하지만 인생을 쉽게 수행 할 수는 없습니다 .
NPX- 노드 패키지 를 실행하기 위한 도구 .

NPXNPM버전 과 함께 제공5.2+

NPM그 자체로는 단순히 패키지를 실행하지 않습니다. 실제로 어떤 패키지도 실행하지 않습니다. NPM을 사용하여 패키지를 실행하려면 package.json파일 에서 해당 패키지를 지정해야 합니다.

NPM 패키지를 통해 실행 파일을 설치하면 NPM이 해당 파일에 연결됩니다.

1. 로컬 설치에는 ./node_modules/.bin/디렉토리에 "링크"가 생성됩니다 .
2. 전역 설치에는 Linux 또는 Windows 의 전역 bin/디렉토리 (예 :)에서 "링크"가 생성됩니다 ./usr/local/bin%AppData%/npm

읽어야 할 문서

NPM :

특정 프로젝트에 로컬로 패키지를 설치할 수 있습니다.

npm install some-package

이제 NodeJS가 명령 행에서 해당 패키지를 실행하기를 원한다고 가정하십시오.

$ some-package

위의 내용은 실패 합니다. 이름 만 입력하면 전역으로 설치된 패키지 만 실행할 수 있습니다 .

이 문제를 해결하고 실행하려면 로컬 경로를 입력해야합니다.

$ ./node_modules/.bin/some-package

packages.json파일 을 편집 하고 해당 scripts섹션 에서 해당 패키지를 추가 하여 로컬로 설치된 패키지를 기술적으로 실행할 수 있습니다 .

{
  "name": "whatever",
  "version": "1.0.0",
  "scripts": {
    "some-package": "some-package"
  }
}

그런 다음 npm run-script(또는 npm run)를 사용하여 스크립트를 실행하십시오 .

npm run some-package

NPX :

npx또는 로컬 프로젝트 바이너리에 <command>존재 하는지 확인 $PATH하고 실행합니다. 위의 예에서 로컬로 설치된 패키지를 실행하려면 some-package다음을 입력하십시오.

npx some-package

또 다른 주요 장점은 npx이전에 설치되지 않은 패키지를 실행할 수 있다는 것입니다 .

$ npx create-react-app my-app

위의 예제는 명령이 실행 된 경로 내에react 앱 상용구 를 생성하고 사용하려고 할 때마다 업그레이드 할 필요없이 항상 최신 버전의 생성기 또는 빌드 도구를 사용하도록합니다.

관련 질문 :

1. node_modules에 로컬로 설치된 패키지를 사용하는 방법은 무엇입니까?
2. NPM : ./node_modules/.bin 폴더를 어떻게 소싱합니까?
3. npm 스크립트를 사용하여 js 파일을 어떻게 실행합니까?

npx 는 npm 패키지 러너입니다 (x는 아마도 eXecute를 나타냄). 일반적인 용도는 패키지를 임시로 또는 시험판으로 다운로드하여 실행하는 것입니다.

create-react-app 는 프로젝트 라이프 사이클에서 한 번만 실행될 것으로 예상되는 npm 패키지입니다. 따라서 npx를 사용하여 단일 단계로 설치하고 실행하는 것이 좋습니다.

맨 페이지에서 언급 한 바와 같이 https://www.npmjs.com/package/npx , NPX이 는 PATH 또는 기본적으로 node_modules / .BIN에서 명령을 실행할 수 있습니다.

참고 : 일부 파기를 통해 create-react-app가 노드 환경에서 실행되는 Javascript 파일 (Linux 시스템의 경우 /usr/lib/node_modules/create-react-app/index.js)을 가리키는 것을 알 수 있습니다. . 이것은 단순히 검사를 수행하는 전역 도구입니다. 실제 설정은 최신 버전이 프로젝트에 설치된 react-scripts에 의해 수행됩니다. 자세한 내용은 https://github.com/facebook/create-react-app 를 참조하십시오 .

NPM은 패키지 관리자이며 NPM을 사용하여 node.js 패키지를 설치할 수 있습니다

NPX는 node.js 패키지를 실행하는 도구입니다.

해당 패키지를 전역 또는 로컬로 설치했는지는 중요하지 않습니다. NPX가 일시적으로 설치하여 실행합니다. package.json 파일을 구성하고 스크립트 섹션에 포함 시키면 NPM이 패키지를 실행할 수도 있습니다.

로컬 또는 전 세계적으로 NPX를 사용하지 않고 노드 패키지를 신속하게 확인 / 실행하려면이 점을 기억하십시오.

np M- 관리자

np X- 실행-기억하기 쉬운

NPX :

에서 https://www.futurehosting.com/blog/npx-makes-life-easier-for-node-developers-plus-node-vulnerability-news/ :

웹 개발자는 개발 시스템에 수십 개의 프로젝트를 보유 할 수 있으며 각 프로젝트에는 고유 한 npm 설치 종속성 세트가 있습니다. 몇 년 전, Grunt 또는 Gulp와 같은 CLI 응용 프로그램을 처리하는 일반적인 조언은 각 프로젝트에 로컬로 설치하고 명령 줄에서 쉽게 실행할 수 있도록 전역 적으로 설치하는 것이 었습니다.

그러나 전 세계적으로 설치하면 해결되는 한 많은 문제가 발생했습니다. 프로젝트는 다른 버전의 명령 줄 도구에 의존 할 수 있으며 많은 개발 관련 CLI 도구로 운영 체제를 오염시키는 것도 좋지 않습니다. 오늘날 대부분의 개발자는 도구를 로컬에 설치하고 그대로 두는 것을 선호합니다.

로컬 버전의 도구를 사용하면 개발자는 전 세계적으로 설치된 버전의 도구와의 비 호환성에 대해 걱정할 필요없이 GitHub에서 프로젝트를 가져올 수 있습니다. NPM은 로컬 버전 만 설치하면됩니다. 그러나 프로젝트 별 설치에는 문제가 없습니다. 프로젝트에서 정확한 위치를 지정하거나 별칭을 가지고 놀지 않고도 올바른 버전의 도구를 어떻게 실행합니까?

그것이 npx가 해결하는 문제입니다. NPM 5.2에 포함 된 새로운 도구 인 npx는 프로젝트 내에서 호출 될 때 올바른 응용 프로그램을 실행할 수있을 정도로 똑똑한 작은 유틸리티입니다.

예를 들어, 프로젝트 로컬 버전의 모카를 실행하려면 프로젝트 내에서 npx mocha를 실행하면 예상대로 작동합니다.

npx의 유용한 부작용은 아직 설치되지 않은 npm 패키지를 자동으로 설치한다는 것입니다. 따라서 툴 제작자 인 Kat Marchán이 지적한 것처럼, 전세계 환경을 오염시키는 Benny Hill을 다루지 않고도 npx benny-hill을 실행할 수 있습니다.

스핀을 위해 npx를 가져 오려면 최신 버전의 npm으로 업데이트하십시오.

npx 패키지를 명시 적으로 설치하지 않고 명령을 실행합니다.

사용 사례:

• 전역 또는 로컬로 패키지를 설치하지 않으려 고합니다.
• 전 세계에 설치할 권한이 없습니다.
• 일부 명령을 테스트하고 싶습니다.

통사론:

npx [options] [-p|--package <package>] <command> [command-arg]...

패키지는 선택 사항입니다 :

npx   -p uglify-js         uglifyjs --output app.min.js app.js common.js
      +----------------+   +--------------------------------------------+
      package (optional)   command, followed by arguments

예를 들면 다음과 같습니다.

Start a HTTP Server      : npx http-server
Lint code                : npx eslint ./src
                         # Run uglifyjs command in the package uglify-js
Minify JS                : npx -p uglify-js uglifyjs -o app.min.js app.js common.js
Minify CSS               : npx clean-css-cli -o style.min.css css/bootstrap.css style.css
Minify HTML              : npx html-minifier index-2.html -o index.html --remove-comments --collapse-whitespace
Scan for open ports      : npx evilscan 192.168.1.10 --port=10-9999
Cast video to Chromecast : npx castnow http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4

추가 정보 command:

• https://docs.npmjs.com/files/package.json#bin
• https://github.com/mishoo/UglifyJS2/blob/master/package.json#L17

간단한 정의 :

npm- 자바 스크립트 패키지 관리자

npx -npm 패키지 바이너리 실행

다음은 NPX 작동 예입니다. npx cowsay hello

bash 터미널에 입력하면 결과가 나타납니다. 이것의 장점은 npx가 일시적으로 cowsay를 설치했다는 것입니다. cowsay가 영구적으로 설치되지 않기 때문에 패키지 오염이 없습니다. 패키지 오염을 피하려는 일회용 패키지에 유용합니다.

다른 답변에서 언급했듯이 npx는 (npm 포함) 패키지를 설치 한 다음 실행하기 전에 구성 해야하는 경우에도 매우 유용합니다. 예를 들어, npm을 사용하여 json.package 파일을 설치하고 구성한 다음 구성된 실행 명령을 호출하는 대신 npx를 사용하십시오. 실제 예 : npx create-react-app my-app