0

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.

enter image description here

LazyOne
  • 158,824
  • 45
  • 388
  • 391
Kembrick
  • 1
  • 3
  • 1
    OK .. so it's about "How to use Babel 6.2 from command line"; not about the actual PhpStorm's File Watcher. How do you run this babel command in your OS terminal? What command do you use? – LazyOne Aug 05 '21 at 16:56
  • 1
    **P.S.** *"This "Output paths to refresh" field changes also don't work"* This field is for IDE to check those files for changes once current File Watcher finished running (e.g. to refresh target file; to upload it to remote server (if Deployment is configured in this way); to run File Watcher on it (if it has one) etc). – LazyOne Aug 05 '21 at 16:58
  • 3
    I seem to have found a solution. The arguments string should be like this: `$FilePathRelativeToProjectRoot$ --out-file $FileDirName$/$FileNameWithoutAllExtensions$.min.js --source-maps --presets minify` – Kembrick Aug 05 '21 at 20:47

1 Answers1

0

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

pgalliker
  • 41
  • 4