DEV Community

Play Button Pause Button
Nick Karnik
Nick Karnik

Posted on • Updated on

Using Parcel Bundler with React

Parcel is a web application bundler that offers blazing fast performance with zero configuration compared to webpack. Click here for the Original Video on Youtube.

If this video was helpful, ❤️ it and subscribe to my YouTube channel.



Top comments (13)

Collapse
 
iam_timsmith profile image
Tim Smith

I love parcel. I use it so much. I can get it up and running in ~5 minutes! I hope more projects start moving over to this.

Collapse
 
theoutlander profile image
Nick Karnik

Agree! Most people are still stuck in the webpack world and afraid to switch because of the effort it took to learn webpack. So far I've had one client who ran into an issue with Parcel and went back to Webpack, but it was related to them using something around WebSockets.

Collapse
 
iam_timsmith profile image
Tim Smith

I don't think parcel works with nodejs in terms of compiling es6+, so I could see that being a reason. Hopefully they add that support soon though.

Thread Thread
 
theoutlander profile image
Nick Karnik

Parcel shouldn’t be used with nodejs, IMO. Node supports most of the ES6 syntax. The latest also supports import/export of modules with the new syntax. Is there a reason you would want to use parcel with node?

Thread Thread
 
theoutlander profile image
Nick Karnik

If you were referring to ES6+, you can set up .babelrc to include specific plugins and that should take care of the issue.

Thread Thread
 
iam_timsmith profile image
Tim Smith

Oh, good to know! I'm still learning Node, so I thought I'd have to use a tool like webpack or parcel to handle ES6+. Thanks for the info!

Thread Thread
 
theoutlander profile image
Nick Karnik

Sure. Check out node.green/ if you haven't. It shows all the features supported by node.

Thread Thread
 
iam_timsmith profile image
Tim Smith

Thanks! I'll check that out!

Collapse
 
dance2die profile image
Sung M. Kim • Edited

Thanks Nick for the wonderful getting-started guide.

As mentioned, parcel is still under development.

Would you recommend using parcel for any production websites?
Or would you use it for academic purposes only?

p.s.
Would you kindly raise the MIC volume a bit 😝

Collapse
 
theoutlander profile image
Nick Karnik

Thank you Sung for the feedback. I agree that the Microphone volume should be up. I lowered it because there's something wrong on my machine where it is picking up some background beeping sound almost identical to an EKG monitor (not sure if it is related to grounding or what....occasionally I get shocked through the mic when it's connected to the desktop :D!).

I noticed similar issues on other Macs, so I wonder if it's my yeti that has issues. Sometimes it happened through other mics too, so I'm stumped! Maybe my machine needs to be reformatted.

Parcel is definitely ready for primetime. If it works in dev, it will work in production just fine. I have been using it for about 12 clients now and there have been zero issues.

Hope that helps!

-Nick

Collapse
 
qm3ster profile image
Mihail Malo

And why won't Webpack #0CJS and performance optimizations exceed any improvements here?
Why was a separate project necessary?

Collapse
 
theoutlander profile image
Nick Karnik

Parcel was released way before Webpack #OCJS. AFAIK, Webpack 4 decided to focus a bit on OCJS because parcel got something like 6k stars overnight and was the talk of the town. I have yet to work with a Webpack project that is completely config-less. I tried migrating to 4.0, but I had to still create a config file for everything to work.

Collapse
 
qm3ster profile image
Mihail Malo

I'd say it's less of a reaction to Parcel than to the underlying dissatisfaction with basic functionality requiring a config, which also caused Parcel.
I personally don't understand that dissatisfaction at all, since it's trivial to just initialize a configuration from a template. In fact, detecting the necessary configuration and writing it to a template once seems like a much better feature than working without a configuration.
I find configless defaults in webpack and typescript more of a nuisance than a feature, with babel taking a much better approach of requiring that you install a "preset" which is external to the core module and can be inspected in isolation.