Using Parcel Bundler with React

It appears that dev.to reduced the quality of this video, so here's a link to the Original Video on Youtube

Did you find this post useful? Show some love!

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.

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.

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.

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?

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

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!

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

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 😝

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

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

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.

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.

Classic DEV Post from May 25

Stop saying you dont have time!

This week I want to talk about something that I have used for a excuse quite a few times. Before I finally started getting a schedule going. And that is saying the excuse I don’t have time to learn blank.

READ POST
Follow @alexgwartney to see more of their posts in your feed.
dev.to is now open source!
View Announcement Post View GitHub Repo
Nick Karnik
Computer Scientist | Hacker | Entrepreneur | Ex-Microsoft | YC | Fullstack Consulting | Mentor
More from @theoutlander
React Component Lifecycle Explained
#react #javascript #webdev #beginners
How to build your own React boilerplate
#javascript #webdev #node #react
Trending on dev.to
Building a Simple URL Shortener With Just HTML and Javascript
#urlshortener #javascript #html
Playing with Discrete Fourier Transform Algorithm in JavaScript
#javascript #algorithms #computerscience #programming
Deploying Next.js on AWS Lambda
#serverless #nextjs #devops #react
Create your own blog easily with Gatsby
#react #javascript #redux #gatsby
How Web APIs work?
#beginners #webapi #javascript #html
Learning Redux and notes
#javascript #react #redux
Fighting boredom with a HyperApp experiment
#javascript #hyperapp #react #vue
Keeping Your Code Simple
#javascript #algorithms #es2015