An Introduction to Parcel.js, the NoConfig Web Application Bundler

An Introduction to Parcel.js, the No-Config Web Application Bundler

Why use a web app bundler?

I won’t spend too much time discussing the reasons for using an app bundler like Parcel.js, because that topic has certainly been covered before. But here’s a basic rundown of the benefits to using such a tool:

  • Your app will have fewer HTTP requests due to scripts or stylesheets being combined
  • Scripts and stylesheets can be loaded on demand, further improving performance
  • Scripts and stylesheets can be automatically minified to deliver fewer kilobytes to the user
  • Bundling and minification work is done automatically by the tool, minimizing manual work
  • Development files are organized modularly, making your code much easier to maintain and debug

As you can see, the benefits are many, and mostly related to performance and project maintenance. There certainly are lots of reasons to use a bundler, if this is something you haven’t yet considered.

With that out of the way, let’s get started with the basics for getting up and running with Parcel.js. I’ll slowly go over the features in this tutorial using some simple examples that you’ll easily be able to follow along with.

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"
}

If you find any of the above confusing due to your lack of familiarity with npm, you can check out my comprehensive tutorial on npm. It’s focused on helping front-end web developers understand the tool.

Creating

[…]

 



This article was written by Louis Lazaris and originally published on CodeinWP.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

You have to agree to the comment policy.

Show Your ❤️ Love! Like Us
Scroll to Top