이후에 새로 생성한 프로젝트 폴더에서 다음 명령을 실행하면 버전을 확인할 수 있다.10
$ ./node_modules/.bin/babel --version
설치한 뒤에, 다음 명령을 실행하면 js/script.jsx를 일반적인 자바스크립트 파일인 js/script.js로 변환할 수 있다.
$ ./node_modules/.bin/babel js/script.jsx -o js/script.js
명령이 긴 이유는 Babel을 실행하기 위해 경로를 작성하기 때문이다. package.json의 scripts 항목에 다음과 같은 명령을 추가하면, npm run build 명령으로 간단하게 실행할 수 있다.11
"build": "./node_modules/.bin/babel js/script.jsx -o js/script.js"
이 명령에 -w 또는 --watch 옵션을 추가하면 자동화할 수 있다.
$ ./node_modules/.bin/babel js/script.jsx -o js/script.js -w
Babel 명령은 script.jsx 파일을 감시하다가 JSX를 새로 저장하면 script.js로 변환한다. 이때 터미널 또는 명령창에서 다음과 같은 내용을 확인할 수 있다.
change js/script.jsx
더 많은 JSX 파일을 변환해야 할 때는 -d (--out-dir) 옵션에 폴더 이름을 입력해서 명령을 실행하면 JSX 소스 파일을 여러 개의 일반 자바스크립트 파일로 컴파일한다.
$ ./node_modules/.bin/babel source -d build
10 역주 윈도 명령창에서 본문처럼 명령을 실행하는 경우 정상적으로 실행되지 않을 수도 있다. 이 때는 경로 구분자로 슬래시(/) 대신 역슬래시(\)를 사용해야 한다. 예를 들면 .\node_modules\.bin\babel --version이라고 실행한다.
11 역주 npm run으로 명령을 실행할 때 node_modules/.bin도 PATH 환경변수에 추가하므로 경로 없이 "build": "babel js/script.jsx -o js/script.js"로 작성해도 실행할 수 있다. 개인적으로는 이어서 소개하는 경로 환경설정보다는 npm script를 활용하는 것을 좀 더 추천한다. npm script에 대한 좀 더 자세한 내용은 공식문서(https://docs.npmjs.com/misc/scripts 및 https://docs.npmjs.com/cli/run-script)에서 확인할 수 있다.