WebStorm/PHPStorm (and so on...) Babel file-watcher setup basics

_WebStorm Babel file-watcher setup basics.md

Basic Babel file-watcher setup

This requires NPM to be installed.

Adding file-watchers

package.json file

If your project does not already have a 'package.json' file; run:

npm init

This will start the process of creating a 'package.json' file for your project.

Add packages for the file-watcher

npm install --save-dev @babel/cli @babel/core @babel/preset-env 

npm install --save @babel/polyfill

This will install all of the packages that WebStorm/PHPStorm will need to create and run the file-watcher.

File Watchers menu

Open WebStorm/PHPStorm.

Go to: 'File', 'Settings', 'Tools' (side menu), 'File Watchers' (side menu)

Create the file-watcher

In the file-watcher menu; click the '+' button, in the top-right corner.

Select 'Babel' from the menu.

This will open the 'Edit Watcher' window.

Name: Used only to tell different file-watchers apart

File type: The file type you wish to target/watch with this file-watcher

Scope: This is the area that the file-watcher will watch - you can change this in order to only target certain directories in your project

Program: This is the path to the Babel package that you installed (usually in '$ProjectFileDir$\node_modules\.bin\babel')

Arguments: This is the actual command that the file-watcher will execute for each file it's watching

Output paths to refresh: This is a list of colon-seporated (':') files, which the file-watcher will use as part of its garbage collection - files described in this list will not trigger the file-watcher, and are marked as 'safe to overwrite at will'

Arguments

Example:

$FilePathRelativeToProjectRoot$ --out-file $FileDirRelativeToProjectRoot$/compiled/$FileNameWithoutExtension$.js --presets @babel/env

'$FilePathRelativeToProjectRoot$' - This is a variable that represents the path of the currently focussed-on file - remember that this line of code is executed for each file the file-watcher is watching

'--out-file $FileDirRelativeToProjectRoot$/compiled/$FileNameWithoutExtension$.js' - This discribes the location that you want the compiled file to be put, and what it should be called

'$FileDirRelativeToProjectRoot$' refers to the directory that the current focussed-on file is in.

'$FileNameWithoutExtension$' refers to the current focussed-on file's name, minus the extention (i.e. minus the '.js').

In this example; the output/compiled file should be placed in the path '[directory of the focussed-on file]/compiled/', and should be called '[the name of the focussed-on file].js'

References

Argument Reference: https://babeljs.io/docs/en/babel-cli/