Tips and tricks

Use Browserify Globally as Watcher in PhpStorm [ add Babelify ]

part 1 – here

npm i -g babelify@10.0.0 minifyify@7.3.5

Use Browserify as Watcher in PhpStorm

$FilePath$
 -t [ /usr/local/lib/node_modules/babelify/index.js --presets [/usr/local/lib/node_modules/@babel/preset-env ] ]
-o
$FileDir$/$FileNameWithoutAllExtensions$.js

You could actually just have this

$FilePath$
 -t [ /usr/local/lib/node_modules/babelify/index.js ]
-o
$FileDir$/$FileNameWithoutAllExtensions$.js

and babel will find the .babelrc file searching reccursevely on top. So on that note, you could have a .babelrc on the top of your users account, the file can look like this

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry",
        "debug": true,
        "forceAllTransforms": true,
        "targets": {
          "chrome": "58",
          "esmodules": true,
          "ie": "11"
        }
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 3
      }
    ]
  ]
}

remember that you should still install those modules in your .babelrc location, from the top of my head

npm i @babel/core@7.7.4 @babel/preset-env@7.7.1 @babel/plugin-transform-runtime@7.6.2 @babel/runtime@7.7.4 @babel/runtime-corejs2@7.7.4 @babel/runtime-corejs3@7.7.4 @babel/preset-react@7.7.4

add a file scope ( PhpStorm )

file:*.source.js

make sure to name your files

{filename}.source.js

Full command with sourcemaps, minify and babelify

$FilePath$
-d
-t
[
/usr/local/lib/node_modules/babelify/index.js
]
-p
[/usr/local/lib/node_modules/minifyify/lib/index.js
--map
$FileNameWithoutAllExtensions$.js.map
--output
$FileDir$/$FileNameWithoutAllExtensions$.js.map
]
-o
$FileDir$/$FileNameWithoutAllExtensions$.js
{"type":"main_options","images_arr":"'#ffffff'","enable_ajax":"off","soundcloud_apikey":"","bg_isparallax":"off","bg_slideshow_time":"0","bg_transition":"slidedown","site_url":"http:\/\/digitalzoomstudio.net","theme_url":"http:\/\/digitalzoomstudio.net\/wp-content\/themes\/qucreative\/","blur_ammount":"26","width_column":"50","width_section_bg":"","width_gap":"30","border_width":"0","border_color":"#ffffff","translate_cancel_comment":"Cancel reply","translate_leave_a_comment":"Leave a comment","translate_leave_a_comment_to":"Leave a comment to","is_customize_preview":"off","width_blur_margin":"30","gallery_w_thumbs_autoplay_videos":"off","enable_native_scrollbar":"on","content_enviroment_opacity":"30","menu_enviroment_opacity":"70"}
{"type":"darkfull"}