Notesheet: Parcel (JavaScript bundler)

Posted on | by Jason Snelders

Status: Work in Progress (Updated 04 March 2020)

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.

Update after 3 weeks:

  • For the most part it’s working well.
  • It updates packages.json and installs dependencies based on my code without me needing to think about it.
    • One initial hitch was referencing images in Vue.js. Bit after a bit of research I found you can use a JavaScript import like import rootImages from "./images/*.*";, then in your JavaScript you just use rootImages.{your_image_name_in_that_folder}.{image_extension} to reference an image (the value will point to the image path in the distribution/build folder.
      I actually created a new JavaScript module file that includes the import and exposes the images. That way, if I switch back to webpack or some other system, I’ve encapsulated all image dependencies in the once location. Following the the complete code from my file to show what I’ve done:

      import rootImages from "./images/*.*";          // Import to reference Parcel.js generated images.
import w3images from "./images/w3images/*.*";   // Import to reference Parcel.js generated images.
      // Search: "parcel js copy images" and "parcel js references images in javascript"
//      https://github.com/parcel-bundler/parcel/issues/1411
//      https://github.com/parcel-bundler/parcel/issues/3056
export const assets = {
    images: {
        root: rootImages,
        w3: w3images,
    }
};

      Now I reference [for example] assets.images.root.{file}.{extension} to get the actual path to a file.

  • I have noticed sometimes I’ll create a syntax error (or some other error) while refactoring and I can’t get rid of errors in the browser console. Even a hard refresh doesn’t work. Stop parcel on the command-line then restart it – that usually fixes the issue, or at least generates a new error on the parcel command-line that points me in a better direction to the error.
  • I’m still using parcel in a private SaaS project I’m building. Sometimes I feel the urge to move over to webpack for better errors and debugging, but I’m familiar enough with it now I don’t switch. By moving parcel dependencies to their own JS modules I can still do it in the future with relative ease.

Resources