One of my least favorite things about starting new JavaScript projects is setting up all the configuration needed to write modern JavaScript. I happily refused to commit Webpack configuration to memory, but the result is an unpleasant feeling whenever I’m starting a project.
If I’m writing a React app, which is most of the time, the problem is solved for the most part with the create-react-app scaffolding tool. Leveraging react-scripts, all of the gnarly Webpack configuration is hidden away until you eject.
But when I started my recent series on generative art, I ended up borrowing an ES6 starter project and adding a bit of boilerplate for P5.js. Copying and pasting the scaffolding of a project works fine, but when someone referred me to Parcel, I jumped at the chance to evaluate it. I’m going to take the P5.js ES6 starter I put together for the first generative art column and rewrite it using Parcel to see how it works.
Parcel bundler in action
In my eyes, the “Hello World” example on the Parcel website claims you can simply write HTML, CSS, and JavaScript using all the new and fancy ES6 features and you don’t have to write any configuration at all. Just install the parcel-bundler package and point it at your main HTML file. Any of the transforms, transpilations, packaging, and even dependency installations are taken care of for you. Truly? Let’s see.
