나는 React 프로젝트를 사용하여 작업했으며 프로젝트 create-react-app
를 시작하는 두 가지 옵션이 있습니다.
첫 번째 방법 :
npm run start
다음과 같은 정의로 package.json
:
"start": "react-scripts start",
두 번째 방법 :
npm start
이 두 명령의 차이점은 무엇입니까? 그리고의 목적은 무엇 react-scripts start
입니까?
정의를 찾으려고했지만이 이름의 패키지를 찾았습니다. 여전히이 명령의 사용법이 무엇인지 모르겠습니다.
답변
반응 형 앱 생성 및 반응 스크립트
react-scripts
create-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 run
scripts
패키지 의 객체 에서 정의한 스크립트를 실행하는 데 사용됩니다.
start
scripts 객체에 키 가 없으면 기본값은node server.js
때로는 반응 스크립트가 제공하는 것보다 더 많은 일을하고 싶을 때가 있습니다 react-scripts eject
. 이렇게하면 프로젝트를 “관리되는”상태에서 관리되지 않는 상태로 변환하여 종속성, 빌드 스크립트 및 기타 구성을 완전히 제어 할 수 있습니다.
답변
Sagiv bg가 지적했듯이이 npm start
명령은 바로 가기입니다 npm run start
. 좀 더 명확하게하기 위해 실제 예제 를 추가 하고 싶었습니다 .
아래 설정은 create-react-app
github 저장소 에서 제공됩니다 . 는 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-css
and를 실행 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 와 특별히 관련된 스크립트입니다