Parcel
I hate JavaScript bundlers.
Don't get me wrong, I love modularizing things, and I love having small files.
What I hate is when I hit ⌘S, ⌘Tab, ⌘R,* and I, a humble human, beat the super-cool, magical, file-system-watching bundler running on my 2.8 GHz processor. I get the old verson, and I have to wait several seconds before I can hit ⌘R and actually see my changes.
Parcel is a JavaScript bundler. But I never beat it. Why?
- It doesn't actually parse JavaScript.
- It works almost entirely by concatenation.
It has a few extra rules that let it be really fast:
- You can never name anything
require
. - You can never use non-constant module names.
- You can never put a
require('…')
call in a string.
(You really shouldn't be doing any of that anyway.)
So don't stand around waiting for your super-cool, magical bundler to do its thing. Use Parcel while you're developing, and iterate to your heart's content. Use your super-cool, magical, really slow bundler for releases, when you don't care how long it takes to run.
How do I use it?
Glad you asked! Like this:
// index.js:const itt = const math = console // math.js:exports x * x
> npm i -g prcl> prcl index.js >parcel.js
Feel free to node parcel.js
or <script src=parcel.js>
at this juncture.
I want source maps!
Just pass the output filename as an argument instead of redirecting.
> prcl index.js parcel.js> ls... parcel.js parcel.js.map ...
I want watching!
There's an option for that.
> prcl -w index.js parcel.jsreadygenerate parcel.js in 5.1463 msgenerate parcel.js in 5.113103 msgenerate parcel.js in 3.508507 msgenerate parcel.js in 4.588618 msgenerate parcel.js in 3.170847 ms...
How fast is it?
> time browserify index.js >browserify.jsreal 0m0.225suser 0m0.197ssys 0m0.031s> time node fuse-box.jsreal 0m0.373suser 0m0.324ssys 0m0.051s> time prcl index.js >parcel.jsreal 0m0.077suser 0m0.059ssys 0m0.017s # on a larger project > time browserify src/api-download.js >browserify.jsreal 0m2.385suser 0m2.459ssys 0m0.416s> time prcl src/api-download.js >parcel.jsreal 0m0.204suser 0m0.187ssys 0m0.083s # want source maps? > time browserify -d src/api-download.js -o bundle.jsreal 0m3.142suser 0m3.060ssys 0m0.483s> time prcl src/api-download.js parcel.jsreal 0m0.315suser 0m0.281ssys 0m0.100s
Do you hate vowels?
No. Someone took the package name already.
* Or wait for it to hot-swap, or whatever.