Tips and tricks

Web Development - Use Babel as Watcher in IntelliJ PhpStorm

First, we need to install babel-cli globally

Open terminal and say

npm install -g @babel/core @babel/cli

Then, you will need a preset that babel will follow

for now, we will use preset-env:

npm install -g @babel/preset-env

We will check if / where preset-env is installed

which @babel/preset-env

It may return nothing, but in my OS X, the location was:

/usr/local/lib/node_modules/@babel/preset-env

Make sure that in Program you may have

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

Then in Arguments

$FilePath$ --out-file $FileDir$/$FileNameWithoutAllExtensions$.js --source-maps --no-babelrc --presets="/usr/local/lib/node_modules/@babel/preset-env"

optional:

and of course, you could have multiple presets / plugins:

$FilePath$ --out-file $FileDir$/$FileNameWithoutAllExtensions$.js --source-maps --presets="/usr/local/lib/node_modules/@babel/preset-env","/usr/local/lib/node_modules/@babel/preset-react" --plugins="/usr/local/lib/node_modules/@babel/plugin-transform-modules-commonjs","/usr/local/lib/node_modules/@babel/plugin-external-helpers"

Leave a comment

Your email address will not be published

{"type":"main_options","images_arr":"'#ffffff'","bg_slideshow_time":"0","site_url":"https:\/\/digitalzoomstudio.net","theme_url":"https:\/\/digitalzoomstudio.net\/wp-content\/themes\/qucreative\/","is_customize_preview":"off","gallery_w_thumbs_autoplay_videos":"off","base_url":"https:\/\/digitalzoomstudio.net"}