Notesheet: Parcel (JavaScript bundler)

Status: Work in Progress


What is Parcel? It’s basically webpack without all the configuration automatically handled out of the box so you can just install it and all your “modern” front-end development compilation happens automatically. Seriously, zero configuration. Clone my sample repository at https://github.com/jsnelders/sample-parcel-js, follow the instructions in the readme.md file and see for yourself.

(That being said, further reading indicates webpack 4 is also zero configuration, though to date I haven’t found a tutorial that doesn’t touch the webpack.js file.)

I discovered Parcel today (11 Feb 2020) and had a test site up and running in under 5 minutes, including typos. Compared to webpack which took “I don’t know how long” to get setup.

  • Keep in mind I’m focused on front-end web development and basically just need it for transpiling ES2015+ to ES5, SCSS pre-processing, minification, bundling and cache busting. And I want the whole setup to be simple.
  • The official site https://parceljs.org/ has a easy getting started guide.
  • The official guide and some articles say you need to npm install the “sass” package but in my sample site this worked out of the box. I suspect that’s because I’m using a version with included features greater than the documentation suggests.

 

 

 


Resources