파일을 하나 불러오는 것이 파일을 여러 개 불러오는 것보다 프론트엔드 애플리케이션의 성능을 향상시키는 데 좋다. 요청이 늘어날수록 지연이 늘어나기 때문이다. 원본 폴더의 모든 파일을 -o (--out-file) 옵션을 사용하여 하나의 자바스크립트 파일로 컴파일할 수 있다.

$ ./node_modules/.bin/babel src -o script-compiled.js

 

사용하는 컴퓨터의 경로 설정에 따라서 ./node_modules/.bin/babel 대신에 babel만 입력해서 실행할 수도 있다. 양쪽 모두 지역 모듈을 실행한다. 기존에 babel-cli를 전역에 설치한 경우에는 npm rm -g babel-cli 명령으로 삭제하자.

생성한 프로젝트에 babel-cli를 지역 모듈로 설치했으나 실행이 불가능한 경우에는 셸 설정 파일에 경로 설정을 추가하는 것을 고려해보자. 유닉스, 리눅스, macOS 등 유닉스 계열 운영체제를 사용한다면 사용하는 셸(bash, zsh 등)에 따라 ~/.bash_profile, ~/.bashrc, ~/.zsh 등을 수정할 수 있다.

다음 셸 구문을 적용하면 경로를 설정할 수 있다. 현재 폴더에 ./node_modules/.bin 폴더가 있다면 지역에 설치한 npm CLI 패키지를 경로 입력 없이 실행할 수 있다.

if [ -d "$PWD/node_modules/.bin" ]; then
  PATH="$PATH:$PWD/node_modules/.bin"
fi

 

셸 스크립트는 터미널의 현재 폴더에서 ./node_modules/.bin 폴더가 있는지 확인하고, Babel, Webpack 같은 npm CLI 도구를 babel, webpack 같은 명령어로 실행할 수 있도록 이 경로를 환경변수에 추가한다.