Introduction to Parcel.JS

Parcel is a web application bundler, differentiated by its developer experience. It offers blazing fast performance utilizing multicore processing, and requires zero configuration.

yarn global add parcel-bundler

Many front-end developers have become frustrated with some of the complexities involved with building web apps today. It’s pretty standard practice to include some kind of build or bundling tool in a front-end workflow, thus many developers have looked into using a front-end tool like webpack/Rollup/Parcel.

Why you should use Parcel

• Zero configuration:

• Performance

• Hot Module Replacement

• Code Splitting

• Support many asset types

Features:

Its developers position it as a fast and zero configuration bundler with the following features:

• Fast bundle times.

• Zero config code splitting.

• Hot module replacement with no configuration needed.

• Automatic transforms using Babel, PostCSS, and PostHTML when needed.

• Parcel has out-of-the-box support for JS, CSS, HTML, file assets, and more without needing any plugins or loaders.

• Readable error logging by printing syntax highlighted code frames when it encounters errors.

Installing Parcel.js

You can install Parcel.js in your terminal using Yarn or npm. For this tutorial, I’ll use npm. Here’s the command to install it globally so you can use it on any project:

npm install parcel-bundler -g

The -g flag installs it globally. If you only want to install it for a single project and add it to your project’s devDependencies in package.json, you can run the same command inside the root folder of the project using the --save-dev flag instead of -g:

npm install parcel-bundler --save-dev

With the global install (which will be the most common use case), you can initiate any given project using the init command. Use the terminal to navigate to the folder you want to use as the root of your application and run:

npm init -y

The -y flag prevents npm from asking any questions, using the defaults for the setup. Assuming my project is called parcel-demo, this creates a package.json file at the root that looks like this:

{
  "name": "parcel-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Code splitting with Parcel.js

In some cases, I’ll want all my modules loaded on all my pages. But in other cases, I might only want to load certain modules on certain pages, in certain contexts. This is what code splitting allows me to do. Earlier I mentioned that my example project includes three pages: index.html, about.html, and contact.html. Let’s say I want to run the same JavaScript bundle on all three pages, but on the about.html page I have a button that triggers something specific. But I only want that code to load when that button is pressed.

Here’s how that code might look using the code splitting feature:

if (document.querySelector('.about')) {
  document.querySelector('.about').addEventListener('click', ()=> {
    import('../js/about.js').then(
      document.body.innerHTML += 'About Page Updated';
    );
  });
}

Notice this is incorporating a new JavaScript feature, dynamic imports using the import() function. This allows me to dynamically load the code I want in a specific instance. In this case, I’m doing it when a button is pressed on the about page. The import() feature returns a promise, so I can do whatever I want inside the .then() clause, which triggers once the imported script is loaded. The about.js script is loaded on demand and this code will be transpiled by Babel to cross-browser ES5, to ensure it works everywhere. When my bundle gets created, the about.js portion gets put in its own file inside the dist/ folder, to enable this file to be loaded on demand.

Production builds with Parcel.js

Up until now I’ve been producing all my Parcel builds on the fly using the built-in server that comes with Parcel and that includes live reload. Each time I save my project, my bundle is built. But the code was always bundled for ongoing development. This way I can view or inspect the source as needed to do some debugging.

Once my project is complete and ready to be pushed to a live server, I can stop Parcel from watching my project. CTRL-C in the terminal does this on many platforms. Then I’ll run the following command to tell Parcel to produce one final build:

parcel build index.html about.html contact.html

In this case, I’m building from all three of my entry files. Once this is done, Parcel is no longer waiting for changes; the final bundle is built and that’s it. In addition to the build being finalized, my code is prepared for production by Parcel. The HTML, CSS, and JavaScript are all minified to produce the smallest possible files for optimized performance.

The Tech Platform

www.thetechplatform.com