Webstorm 에서 File watcher 사용하기(Babel)

웹스톰에서 ES6 코딩을 하려고 설정을 바꾸면 File watcher 가 사용 가능하다는 알림이 뜨곤 하는데요..
File watcher 사용법에 대해서 알아보겠습니다.

먼저 웹스톰 설정(Language & Frameworks | JavaScript) 에서 ECMAScript 6 를 사용하도록 변경하셔야 합니다.

그러면 ES6에 대해서 코드 자동 완성, 실시간 문법 체크, 모듈과 클래스 네비게이션 등의 보조 기능이 제공됩니다.

현재 바벨은 트랜스파일러로서 가장 많이 사용되고 있습니다. 웹스톰의 File watchers 를 통해 설정할 수 있습니다.

File watcher 는 웹스톰의 기본 도구로서 파일이 변경되었을 때 자동으로 커맨드 라인 명령을 실행할 수 있게 해줍니다. 웹스톰에는 바벨을 위한 기본 설정 파일이 제공됩니다. 어떻게 적용하는지 보겠습니다.

npm 을 통해 Babel CLI 를 설치합니다.

npm install --save-dev babel-cli

그리고 Preferences->Tools->File watchers 메뉴에서 + 버튼을 눌러 바벨 file watcher 를 선택합니다.
File watcher 설정에서, Babel CLI 의 경로를 설정해줍니다.(e.g. node_modules/.bin/babel on OS X)

이 외에 ES6 트랜스파일링을 위한 Babel 6 을 설치하셔야 합니다. 터미널에서 다음을 실행하세요.

npm install --save-dev babel-preset-es2015

그리고 .babelrc 파일을 다음과 같이 작성하여 생성합니다.

{
"presets": ["es2015"]
}

그 외에 다른 Watcher 설정들은 미리 정의되어 있으므로, 바로 사용이 가능합니다.
이제 컴파일된 파일들은 원본 파일과 같은 경로에 위치하게 됩니다.