Babel Quick Setting with PHPStorm File Watcher

*1.Installing NodeJS
  Download node here: https://nodejs.org/en/
 
 2.Installing Babel
   npm i -S babel-cli babel-preset-es2015
   
 3.Setting phpStorm File watcher
   3.0 Scope can be set if neccesary
   3.1 find program under bin/babel.js
   
 If you want to out a dir at the root of the project:
   3.2 set its arguments
   $FilePathRelativeToProjectRoot$ -o $FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$-compiled.js --source-maps --presets es2015
   3.3 set its output path - under current *.js file 
   $FilePathRelativeToProjectRoot$/$FileNameWithoutExtension$-compiled.js:$FilePathRelativeToProjectRoot$/$FileNameWithoutExtension$-compiled.js.map
 
 or If you want to out files under the current working dirctory:
   make sure the scope is being set
   3.2 set its arguments
   $FilePathRelativeToProjectRoot$ --source-maps --out-dir $FileDirPathFromParent(src)$/dist/$FileNameWithoutExtension$-compiled.js
   3.3 set its output path - under current direcoty
   $FileRelativeDir$
   3.4 set option - working directory
   $ProjectFileDir$