Parcel 2: The Best Frontend Bundler

Today we're playing with Parcel 2!

Parcel is an alternative to Webpack. It prides itself on being ready to use out of the box (aka zero-config).

It's been around for a while, but I've only now gotten around to playing with it...and I gotta say...it's pretty impressive.

Watch along as I get a new app bootstrapped in no time at all with Parcel 2!

Note: Parcel 2 is not yet final yet. I'm using an alpha version in this video, however everything that I show you I don't expect to change in the final version.

——

[personinousapraham]

"defer" is probably the attribute you want in your script tag, not "async"; async just runs it asynchronously, defer will run after DOM loads

[dealloc]

Parcel also supports importing Rust (.rs) files (yes, the actual source files) and it will transform it to WebAssembly and you can just call exported functions as if they were JS, but, you know with the benefit of the performance of WASM if you need it (e.g. heavy computations) — They are in the middle of rewriting the transformer, and hopefully take into consideration more than just individual files, but whole projects (Cargo.toml) so you can split things out more.

[noherczeg]

Parcel 1 came with something like 2k transitive deps. If you have a really simple app it's overkill (you can create / use bootstrap projects), if you have a really complicated app it won't suffice.

[billpliske]

I always felt Create React App was a bit overkill, but never really felt comfortable with another solution, so CRA was my crutch for its simplicity.
But this ... this is super-interesting and exciting. What are the downsides you've noticed to making this a default choice over CRA?

[LorenzoJimenez]

December 2021: The demo is still sweet. Thanks.

[Marasma]

Awesome personality man. Loving the content.

[DRocksRecords]

I mostly like where it figures out what to do from the html file itself

[rtnjo]

I almost forgot to subscribe, it's nice that you mention that, it really works) love your charisma man. ty for vid

[jmeumeu]

How's the bundle size with parcel v2 compared to webpack? In v1 there was no tree shaking out of the box and the experimental option to turn it on was not doing too well in my experience.

[DmitriDonRU]

Parcel recently released beta 3, may be you want to make a follow up video?

[reemadsouza]

Hi, have you tried if autoprefixer works in parcel v2? I am using parcel v2 and have bunch of flex, other scss and cannot see vendor prefixes generated in css in dist? Thank you.

[wchorski]

When building with parcel, I check the built "index.html" with Live Server and the CSS file is unlinked.

If I go in and edit the 'src="/style.css"' and add a period before like this 'src="./style.css" then it works. How to I build the app to link properly?

[jameshagood]

I got a BasicReactSetUp repository on github configured with config files for parcel eslint babel prettier gitignore ect.. and I just clone that repo before I start a new project. I also have one for webpack already configured but I rarely use it

[abdulmalikzihad]

Can I use this set up for my another project.. Or should I have to set up again ...

[IkraamDev]

Does it auto reload the browser on a CSS change?

[mrkhoros]

I cannot get a view out of build I get a blank page. I don't know what to do.
I am serving it with serve and so far I have done the following steps.

Added "." or "./" to the package.json


This is my current package.json



{
"name": "dji30",
"version": "1.0.0",
"description": "",
"main": "index.html",
"homepage": "./",
"scripts": {
"dev": "parcel src/public/index.html",
"build": "parcel build src/public/index.html"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"parcel": "^2.0.0-alpha.3.2"
},
"dependencies": {
"axios": "^0.19.2",
"dayjs": "^1.8.28",
"lightweight-charts": "^3.0.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"underscore": "^1.10.2"
}
}

I am desperate to know how to serve Parcel and their team on Github is not responsive.

[perrosanchez]

Hi Harry, how are you? I understand that in this version 2 when doing build we would have the option to do it in separate folders, is this possible? How can we do it. Thank you!

[adamthedev]

9:30 Code equivalent of a Freudian slip

[mouradaouinat]

How do you do code splitting with parcel?

[TroyCSchmidt]

It seems to me that Parcel gave great speed improvements over Webpack 3, but then that forced Webpack 4 to be focused on speed as well. So then they were pretty much tied on speed for building from scratch and only still saw improvements on rebuilds from cache. Is Parcel2 faster than WebPack 4 now?