'react-scripts start'명령은 정확히 무엇입니까?

나는 React 프로젝트를 사용하여 작업했으며 프로젝트 create-react-app를 시작하는 두 가지 옵션이 있습니다.

첫 번째 방법 :

npm run start다음과 같은 정의로 package.json:

"start": "react-scripts start",

두 번째 방법 :

npm start

이 두 명령의 차이점은 무엇입니까? 그리고의 목적은 무엇 react-scripts start입니까?

정의를 찾으려고했지만이 이름의 패키지를 찾았습니다. 여전히이 명령의 사용법이 무엇인지 모르겠습니다.

반응 형 앱 생성 및 반응 스크립트

react-scriptscreate-react-app스타터 팩 의 스크립트 세트입니다 . create-react-app를 사용하면 구성하지 않고 프로젝트를 시작할 수 있으므로 프로젝트를 직접 설정할 필요가 없습니다.

react-scripts start핫 모듈 재로드뿐만 아니라 개발 환경을 설정하고 서버를 시작합니다. 여기 에서 모든 것이 무엇을하는지 확인할 수 있습니다 .

와 생성하는 - - 응용 프로그램 반응 이 밖으로 상자의 기능을 다음 있습니다.

• React, JSX, ES6 및 Flow 구문 지원
• 객체 확산 연산자와 같이 ES6 이외의 언어 추가.
• 자동 접두사 CSS이므로 -webkit- 또는 다른 접두사가 필요하지 않습니다.
• 적용 범위보고를 기본적으로 지원하는 빠른 대화식 단위 테스트 러너.
• 일반적인 실수에 대해 경고하는 라이브 개발 서버.
• 해시 및 소스 맵과 함께 프로덕션 용 JS, CSS 및 이미지를 번들로 제공하는 빌드 스크립트입니다.
• 모든 Progressive Web App 기준을 충족하는 오프라인 우선 서비스 워커 및 웹 앱 매니페스트
• 단일 종속성으로 위 도구에 대한 번거 로움없는 업데이트.

npm 스크립트

npm start에 대한 바로 가기입니다 npm run start.

npm runscripts패키지 의 객체 에서 정의한 스크립트를 실행하는 데 사용됩니다.

startscripts 객체에 키 가 없으면 기본값은node server.js

때로는 반응 스크립트가 제공하는 것보다 더 많은 일을하고 싶을 때가 있습니다 react-scripts eject. 이렇게하면 프로젝트를 "관리되는"상태에서 관리되지 않는 상태로 변환하여 종속성, 빌드 스크립트 및 기타 구성을 완전히 제어 할 수 있습니다.

Sagiv bg가 지적했듯이이 npm start명령은 바로 가기입니다 npm run start. 좀 더 명확하게하기 위해 실제 예제 를 추가 하고 싶었습니다 .

아래 설정은 create-react-appgithub 저장소 에서 제공됩니다 . 는 package.json실제 흐름을 정의하는 스크립트의 무리를 정의합니다.

"scripts": {
  "start": "npm-run-all -p watch-css start-js",
  "build": "npm run build-css && react-scripts build",
  "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
  "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
  "start-js": "react-scripts start"
},

명확하게하기 위해 다이어그램을 추가했습니다.

파란색 상자는 스크립트에 대한 참조이며 npm run <script-name>명령으로 직접 실행할 수 있습니다 . 그러나 당신이 볼 수 있듯이 실제로 두 가지 실제 흐름이 있습니다 :

• npm run start
• npm run build

회색 상자는 명령 줄에서 실행할 수있는 명령입니다.

예를 들어 명령 을 실제로 실행 하는 명령 npm start(또는 npm run start)을 npm-run-all -p watch-css start-js실행하는 경우 명령 줄에서 실행됩니다.

필자의 경우이 특수 npm-run-all명령 이 있는데, 이 명령은 "build :"로 시작하는 스크립트를 검색하고 모든 스크립트를 실행하는 인기 플러그인입니다. 실제로 해당 패턴과 일치하는 것이 없습니다. 그러나 -p <command1> <command2>스위치를 사용하여 여러 명령을 병렬로 실행하는 데 사용할 수도 있습니다 . 따라서 여기서는 두 개의 스크립트, 즉 watch-cssand를 실행 start-js합니다. (마지막으로 언급 한 스크립트는 파일 변경을 모니터링하는 감시자이며 종료시에만 종료됩니다.)

• 는 watch-css있는지 확인합니다 *.scss파일로 변환하는 *.css파일 및 향후 업데이트를 찾습니다.

• start-js받는 점 react-scripts start개발 모드에서 웹 사이트를 호스팅합니다.

결론적으로 npm start명령을 구성 할 수 있습니다. 그 기능을 알고 싶다면 package.json파일 을 확인해야 합니다. (일이 복잡해지면 작은 다이어그램을 만들고 싶을 수도 있습니다).

이 같은 스크립트를 실행 NPM에 스크립트의 이름은 "시작" npm run scriptName, npm start 도에 대한 짧은 npm run start

"react-scripts"에 관해서는 이것은 create-react-app 와 특별히 관련된 스크립트입니다