Tips and tricks
Get Browserify Globally as Watcher in PhpStorm [ add Babelify ] !
Posted on November 24 2019 / 1 comment
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
AUTHOR
-
Pingback: Use Browserify as Watcher in PhpStorm – Digital Zoom Studio