How to set the extension and path for the output file in JetBrains File Watcher with Babel? [Linux]

Question

I am trying to set up PhpStorm to work with Babel instead of UglifyJS. I need the minifed output file to be written with a different extension to the same directory where the source script is located.

I changed argument line in the File Watchers settings for Babel to the following: $FilePathRelativeToProjectRoot$ --out-dir dist --out-file-extension .min.js --source-maps --presets minify

This is works, but output file is saved to /dist directory (without specifying --out-dir dist everything stops working) and --out-file-extension option is completely ignored. I suspect this is due to the old version of Babel 6.2, which I can't manage to update.

This "Output paths to refresh" field changes also don't work: $FileNameWithoutExtension$.min.js

Please explain how to change the arguments to solve this problem.

Answer 1

For me this solution works, which saves the output files .min.js at the same location, as the original file:

1. Install Babel global sudo npm install --save-dev -g @babel/core
2. Install Babel Minify global sudo npm install babel-preset-minify --save-dev -g
3. Setup PhpStorm Watcher with the following parameters:

Programm:

/usr/local/lib/node_modules/@babel/cli/bin/babel.js

Arguments:

$FilePathRelativeToProjectRoot$ --out-file $FileDir$/$FileNameWithoutExtension$.min.js --presets /usr/local/lib/node_modules/babel-preset-minify

PhpStorm Watcher Setup