Zero Config TypeScript Bundling with Parcel

How the hell do they not make a bigger deal of this?

Web application bundling is a development practice that daunted me at first. As with a lot of JavaScript there are many ways to do it, everyone has their opinions on which is best and sometimes the initial setting up is enough to put you off the tool entirely.

I’d say that most of my bundling experience has been with Webpack. Webpack’s a powerful tool and its configurability is in many ways its best feature, but learning how to create an appropriate configuration as well as more advanced goodies like “hot module loading” really can be a bit to swallow at first. If you’re a TypeScript shill like I am you’ll also need to add something like “awesome-typescript-loader”, and whilst it is actually awesome there's nothing awesome about extra effort in the setup stages of an application.

I shouldn't complain though, these steps are all relatively basic and necessary for any web developer to learn and in defence of Webpack, you’ll end up getting your webpack.config.js off your boss or ripping it out of a boilerplate that has been prepared by someone who is infinitely better versed in the technology (web development at its finest 🙌🙌🙌).

Enter Parcel…

Parcel addresses a lot of the problems with the step into web bundling by providing a "blazing fast, zero configuration web application bundler”. This definitely piqued my interests, and looking at the documentation on their site it did everything you needed it to do out of the box, or should I say out of the parcel. My one gripe with it, no TypeScript support. Or at least that’s what their documentation had me think, as after reading into it I could not see any mention of TypeScript in the assets section or even a .ts file in the pretty bundling animation they had on their home page.

Don't get me wrong I love the animation

I’ll save you the long story of how I found samples and issues on GitHub; Parcel does support TypeScript and I’m happy to say it works exactly how you would expect it would.

To get started with Parcel, install it globally with npm install -g parcel-bundler . That's it, they're not lying about that whole zero configuration thing. Make an index page and TypeScript file, referencing the TypeScript file in the index page (as a .ts not a .js).

To bundle your application, just run parcel index.html watch the pretty emoji slathered output crawl before your very eyes.

With that simple command, you have a powerful bundling solution which hot reloads, transpiles, splits code, resolves modules and so much more without touching a single configuration file.

If you are looking to dip your toes into web application bundling or are a seasoned web developer wanting to try something new seriously give Parcel a try.

If you liked this little write up please give me a clap 👏 as it powers the ego which drives me to produce more content like this.