Tips and tricks

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

~/.npm_packages/lib/node_modules/browserify/bin/cmd.js

$FilePath$
-t
[
~/.npm_packages/lib/node_modules/envify/
--NODE_ENV
production
]
-t
[
~/.npm_packages/lib/node_modules/babelify/index.js
--presets
["~/.npm_packages/lib/node_modules/@babel/preset-env"
"~/.npm_packages/lib/node_modules/@babel/preset-react"]
]
-p
[
~/.npm_packages/lib/node_modules/minifyify/lib/index.js
--map
$FileNameWithoutAllExtensions$.js.map
--output
$FileDir$/$FileNameWithoutAllExtensions$.js.map
]
--debug
-o
$FileDir$/$FileNameWithoutAllExtensions$.js

~/.npm_packages/lib/node_modules/browserify/bin/cmd.js ~/Dropbox/hosts/devsite/wpfactory/wp-content/plugins/dzs-youtube-block/libs/frontend-dzsytb/frontend-dzsytb.source.js -t [ ~/.npm_packages/lib/node_modules/envify/ --NODE_ENV production ] -t [ ~/.npm_packages/lib/node_modules/babelify/index.js --presets [~/.npm_packages/lib/node_modules/@babel/preset-env ~/.npm_packages/lib/node_modules/@babel/preset-react] ] -p [ ~/.npm_packages/lib/node_modules/minifyify/lib/index.js --map frontend-dzsytb.js.map --output ~/Dropbox/hosts/devsite/wpfactory/wp-content/plugins/dzs-youtube-block/libs/frontend-dzsytb/frontend-dzsytb.js.map ] --debug -o ~/Dropbox/hosts/devsite/wpfactory/wp-content/plugins/dzs-youtube-block/libs/frontend-dzsytb/frontend-dzsytb.js
/pre>