programing

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

showcode 2023. 4. 5. 22:27
반응형

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

create-react-app프로젝트를 시작하려면 두 가지 옵션이 있습니다.

첫 번째 방법:

npm run startpackage.json음음음같 뭇매하다

"start": "react-scripts start",

두 번째 방법:

npm start

이두두 령이 ?이 ??? ??? 이 글의 입니까?react-scripts start

정의를 찾으려고 했는데, 방금 이 이름의 소포를 발견했습니다.이 명령어의 용도를 아직 모르겠습니다.

create-syslog-app 및 react-syslog

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

react-scripts start는 개발 환경을 설정하고 서버를 기동하며 핫모듈 새로고침도 실행합니다.여기서 읽으면 어떤 효과가 있는지 알 수 있습니다.

create-module-app을 사용하면 다음과 같은 기능을 바로 사용할 수 있습니다.

  • React, JSX, ES6 및 Flow 구문이 지원됩니다.
  • ES6 이상의 언어 추가는 객체 확산 연산자를 좋아합니다.
  • 자동 수정 CSS이므로 -webkit- 또는 기타 접두사는 필요하지 않습니다.
  • 커버리지 리포트에 대한 지원을 내장한 고속 인터랙티브 유닛 테스트 러너.
  • 일반적인 실수를 경고하는 라이브 개발 서버입니다.
  • 해시 및 소스 맵을 사용하여 실제 가동용으로 JS, CSS 및 이미지를 번들하는 빌드 스크립트입니다.
  • 모든 프로그레시브 웹 앱 기준을 충족하는 오프라인 최초 서비스 워커와 웹 앱 매니페스트.
  • 1개의 의존관계로 상기의 툴을 간단하게 갱신할 수 있습니다.

npm 스크립트

npm start 에 대한 지름길입니다.npm run start.

npm run 에서 정의한 스크립트를 실행하기 위해 사용됩니다.scriptsJsonjson

if ifstart 오브젝트의에서는, 로 「키」가 됩니다.츠키다node server.js

보다 더 것을 이, 이 경우, 「이러다」를 실행할 수 .react-scripts eject이것에 의해, 프로젝트가 「관리 대상」상태에서 「관리 대상외」상태로 이행해, 의존 관계, 빌드 스크립트, 및 그 외의 설정을 완전하게 제어할 수 있게 됩니다.

b했듯이, Sagiv b.g.는 Sagiv b.g.가 지적한 바와 같이,npm start입니다.npm run start좀 더 명확히 하기 위해 실제 사례를 추가하고자 합니다.

다음의 설정은,create-react-appgithub repo.는 실제 플로우를 정의하는 일련의 스크립트를 정의합니다.

"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>명령어를 입력합니다.그러나 보시는 바와 같이 실제 흐름은 2개뿐입니다.

  • npm run start
  • npm run build

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

「」를 했을 경우, 「」를 실행합니다.npm start (오류)npm run start )로됩니다.npm-run-all -p watch-css start-js이치노

이 한 저 in in in this this this this this this this this this this this this this this this this this this in in in in in 가 있습니다.npm-run-all명령어는 "build:"로 시작하는 스크립트를 검색하여 모두 실행하는 일반적인 플러그인입니다.사실 그런 패턴은 없어요.와 같이 병렬로 할 수 여기에서는 이 명령어를 사용하여-p <command1> <command2>전환합니다.여기서 2개의 스크립트(예:및 )를 실행합니다(마지막으로 언급된 스크립트는 파일 변경을 감시하는 감시자이며 종료된 경우에만 종료됩니다).

  • watch-css「 」가, 「 」로 되어 있는 것을 합니다.*.scss*.css파일 및 향후 업데이트를 찾습니다.

  • start-js 가리키다react-scripts start웹 사이트를 개발 모드로 호스팅합니다.

결론적으로 명령어는 설정 가능합니다. 이 파일이 어떤 기능을 하는지 알고 싶다면 파일을 확인해야 합니다(그리고 일이 복잡해지면 간단한 도표를 작성하는 것이 좋습니다).

간결하게 - 이렇게 동작합니다.

node node_modules/react-scripts/bin/react-scripts.js start

이고, 에는 '시작'이라는합니다.npm run scriptName,npm start 의 줄임말이기도 하다 npm run start

'react-scripts'에 대해서는 create-react-app과 관련된 스크립트입니다.

npm start 의 줄임말입니다.

여기서 확인할 수 있습니다.npm start와 npm run start의 차이

반응 반응 반응 개시

react-private는 리액트 애플리케이션의 작성, 개발 및 테스트를 지원하는 스크립트 세트입니다.create-react-app에서 사용됩니다.

React create-react-app을 작성하기 입니다. 해석하고 .create app.webpack합니다.에 의해 브라우저 해석하는 동안 웹 팩은 babel을 사용하여 응용 프로그램을 JavaScript로 변환합니다.이 JavaScript는 브라우저 전체에서 더 나은 지원을 제공합니다.을 Webpack에 합니다.public/index.htmlhttp://localhost:3000브라우저에서 이 URL로 이동하면 응용 프로그램의 실시간 인터랙티브 인스턴스가 표시됩니다.소스 코드에 저장된 변경 사항은 실행 중인 앱 인스턴스에 자동으로 반영됩니다. 토픽에 대한 자세한 내용은 여기를 참조하십시오.

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

반응형