react-script, create-react-app

CRA : Create React App

• React app 개발환경을 한줄의 커맨드로 구성해주는 boilerplate
• react와 facebook에서 만듦

CRA가 하는 일

1. index.html, index.js를 포함한 웹페이지에 필요한 기본 디렉토리 구성
2. react, react-dom, react-scripts 및 dependency 라이브러리 설치
3. react-scripts를 사용하여 package.json에 npm command 정의

react-script 가 하는 일

react-scripts는 CRA의 스타터팩
개발 환경 셋업, 프론트 서버 시작 as well as hot module reloading.

npm start == npm run start

• npm run start => "start": "react-scripts start"

// react-scripts/scripts/start.js
process.env.BABEL_ENV = 'development';
process.env.NODE_ENV = 'development';
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const {
  choosePort,
  createCompiler,
  prepareProxy,
  prepareUrls,
} = require('react-dev-utils/WebpackDevServerUtils');
const openBrowser = require('react-dev-utils/openBrowser');

const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
const HOST = process.env.HOST || '0.0.0.0';

start.js 스크립트에서 webpack으로 src/index.js를 엔트리로 하는 소스파일들을 번들링하고 그것을 webpack-dev-server와 react-dev-utils를 사용하여 browser 창을 열고 띄움

npm test

react-scripts/scripts/test.js
jest를 이용하여 (.test.) test코드가 작성된 테스트 파일을 실행

npm run build

// react-scripts/scripts/start.js
process.env.BABEL_ENV = 'production';
process.env.NODE_ENV = 'production';

npm start 처럼 번들링을 하고 배포가능한 파일을 build 디렉토리에 저장한다.

npm run eject

create-react-app에 정해진 방식이 아닌 커스텀을 하고 싶을 때 사용

참고 문헌

• create-react-app 살펴보기
• What exactly is the 'react-scripts start' command?