Tips and tricks
Get Browserify Globally as Watcher in PhpStorm [ add Babelify ] !
part 1 – here
part 3 – Use Browserify Globally as Watcher in PhpStorm [ add import / export support ]
npm i -g babelify@10.0.0 minifyify@7.3.5
you should have babelrc, if you do not have it, you can follow – here
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 -g babel-core @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 core-js@3 @babel/polyfill@7
add a file scope ( PhpStorm )
file:*.source.js
make sure to name your files
{filename}.source.js
Remember to set in Program argument ( if using PhpStorm ):
/usr/local/lib/node_modules/browserify/bin/cmd.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