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 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 entirely. JavaScript tool 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 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 and whilst it is actually awesome there's nothing awesome about extra effort in the setup stages of an application. “hot module loading” “awesome-typescript-loader”, 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 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 🙌🙌🙌). webpack.config.js Enter Parcel… addresses a lot of the problems with the step into web bundling by providing a 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. Parcel "blazing fast, zero configuration web application bundler”. 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 . 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 not a ). npm install -g parcel-bundler .ts .js To bundle your application, just run watch the pretty emoji slathered output crawl before your very eyes. parcel index.html 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.

Microsoft

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Zero Config TypeScript Bundling with Parcel

Too Long; Didn't Read

Company Mentioned

Alex Billson

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Zero Config TypeScript Bundling with Parcel

Too Long; Didn't Read

Company Mentioned

Alex Billson

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES