Search code examples
windowsphpstormwebstormexecutablebabel-6

How transpile via IDE ES6 to ES5 (and React-JSX) with WebStorm on Win10 with Babel6?

A lot of sources explain that for this you need to

  • create a "File Watcher"-Job in the WebStorm-Settings (Tools)
  • define a "Scope" in WebStorm for the files you want to process
  • define a .babelrc file for configuration. Babel will use this automatically so you save some params in the call

{ "presets": ["es2015", "react"], "plugins": ["transform-es2015-arrow-functions"] }

  • npm install --save-dev the corresponding packages together with the babel-cli package.

BUT... how can I run the babel-Command on Windows when babel-cli module just delivers a "babel.js" file in its bin-folder? However Windows can only execute .exe, .bat or .cmd-files.

I tried to wrap the call in a cmd-script containing babel %* as I found a solution in one web article, but this did not work for me.

Solution

  • The solution for me was to fill the File Watcher form in a way to have the call of the node executable as Program and add the call for babel.js as first of the Arguments

    • Program: C:\Program Files\nodejs\node.exe
    • Arguments: $ProjectFileDir$/node_modules/babel-cli/bin/babel.js $FilePathRelativeToProjectRoot$ --source-maps --out-dir src/test/js
    • Working Directory: $ProjectFileDir$
    • Output paths to refresh: $ProjectFileDir$\src\test\js

    This makes the babel.js callable for the File Watcher.