0

Background:

I have several vanilla JS projects with files up to 25 000 lines / single file in which I would like to use ES6 capabilities + require so I can make the code more readable. OS X guy by the way

Possible solution:

I could make up a package.json and use a webpack for each project, but I would prefer if I do not do that.

What I have done so far:

Install browserify globally

sudo npm install -g browserify

setup a watcher in PhpStorm

phpstorm config

global browserify path

/usr/local/lib/node_modules/browserify/bin/cmd.js

arguments

$FilePath$
-o
$FileDir$/$FileNameWithoutAllExtensions$.js

all works fine, and if I have a require in my code

var foo = require('./inc/_dependency-functionality');

✅ it will bundle just right and the required external files will get bundle inside a single file

BUT, ideally, I would like to have it so that I can use ES6 import / export functions, which may say I need babelify

doing this

sudo npm install -g browserify

and using

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

❌ will not actually babelify the script

I'm kind of stuck

Community
  • 1
  • 1
digitalzoomstudio
  • 1,112
  • 1
  • 15
  • 30

1 Answers1

0

Ok, I managed to do it

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

Babelify should be appended by /index.js

and then you can actually lose the presets, if you have .babelrc in the home of your user library ( babel searches for .babelrc recursively on top )

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

Also, make sure your files are named file.source.js not file.babel as I had them, as the transpiling will not start for unknown files

digitalzoomstudio
  • 1,112
  • 1
  • 15
  • 30