시계 프로젝트의 폴더 구조는 다음과 같다.

/clock
  index.html
  /jsx
      script.jsx
      clock.jsx
  /js
      script.js
      clock.js
      react.js
      react-dom.js

 

Babel CLI에 -w와 -d 옵션을 주어, 모든 JSX 파일을 컴파일한 후 산출물 폴더인 clock/js에 저장하고, 파일을 수정할 때마다 다시 컴파일하도록 했다. 또한, 상위 폴더인 ch04에 있는 package.json 파일의 scripts 항목에 이 명령을 추가하여 ch04 폴더에서 npm run build-clock으로 실행할 수 있다.

"scripts": {
  "build-clock": "./node_modules/.bin/babel clock/jsx -d clock/js -w"
},