'반응 스크립트 시작'명령은 정확히 무엇입니까?

'반응 스크립트 시작'명령은 정확히 무엇입니까?

---

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

첫 번째 방법 :

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

"start": "react-scripts start",

두 번째 방법 :

과 npm start

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

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

---

create-react-app 및 react-scripts

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

react-scripts start개발 환경을 설정하고 서버를 시작하고 핫 모듈을 다시로드합니다. 여기 를 읽고 그것이 당신을 위해 무엇을하는지 볼 수 있습니다 .

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

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

npm 스크립트

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

npm runscriptspackage.json 의 객체에 정의한 스크립트를 실행하는 데 사용됩니다.

start스크립트 개체에 키 가 없으면 기본값은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실행하면.

In my case, I have this special npm-run-all command, which is a popular plugin that searches for scripts that start with "build:", and executes all of those. I actually don't have any that match that pattern. But it also has 2 parameters after the -p switch, which are other scripts. So, here it acts as a shorthand to execute those 2 scripts. (i.e. watch-css and start-js)

• The watch-css makes sure that the *.scss files are translated to *.cssfiles, and looks for future updates.

• The start-js points to the react-scripts start which hosts the website in a development mode.

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

---

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

"react-scripts"는 create-react-app 과 관련된 스크립트입니다.

참고 URL : https://stackoverflow.com/questions/50722133/what-exactly-is-the-react-scripts-start-command