JSFeeds: scotch.io - A Zero Configuration Module Bundler -- Meet Parcel

Tuesday, 26 December, 2017 UTC

A Zero Configuration Module Bundler -- Meet Parcel

Summary

As developers, we love to build parts of our application as modules, being that modules help to improve, especially the reusability of code. So, writing or importing modules into an existing or a new web application is almost inevitable. To make the workflow as seamless as possible we also make use of bundlers to compile file assets.

Despite having numerous bundlers that carry out practically the same functionality but different and separate modes of configuration, I will like to present to you in this article, a new JavaScript bundler called Parcel.

What is Parcel and Why Use It?

Parcel is an asset bundler for modern applications. It offers a blazing fast compilation time and zero configuration. Simply put, parcel allows simplicity in compiling file assets. Out of the box, parcel can be used on a large code base or just a very basic application that requires compilation of file assets.

According to the creator of Parcel, the intention was to solve two main problems with existing popular module bundlers like Browserify and Webpack: performance and hassles during configuration. With Parcel you can easily load modules with either commonJS and ES6 module syntax, as we will see later in this article.

With Over 12,000 stars already on Github. Parcel has surely gained a lot of attention from the community.

Some of the features include:

Blazing fast bundling
Out of the box support for css, js, HTML, images, file assets and no need to install plugins to carry out all this
A built in development server.

Benchmark by Parcel

What we will learn

In this article, I am going to show you how to set up parcel, how to create modules and how to use it with existing npm modules, sass and some other stuffs with very minimal or no configuration at all. Ready? let’s get to work!

Getting Started

Getting started and setting up Parcel is incredibly simple. Install Parcel globally on your machine with:

npm install -g parcel-bundler

If you are on unix, you might need to do this:

sudo npm install -g parcel-bundler

Create a directory and intialize by creating a package.json file in the newly created project directory:

mkdir parcel-project

Now change directory and initialize a node project:

cd parcel-project 

npm init -y

This will create a package.json with default settings within the project directory.

Set Up Entry Point

Parcel accepts files like HTML and JavaScript as an entry point. Create these files :

touch index.html && touch index.js

Add the relative path to your JavaScript file in the index.html.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Parcel Project</title>
    </head>
    <body>

        <h2 id="content"></h2>

        <script src="./index.js"></script>
    </body>
    </html>

Now open Index.js and write:

    console.log("This is just a test");

Start Server

Update package.json file with a script to run parcel built in server.

{
...
  "scripts": {
    "start": "parcel index.html"
  },
 ...
}

Start the server :

npm run start

Apart from starting a local server on port 1234, Parcel will automatically create a dist folder

Within the new dist``' folder created, the new js file parcel-project.js``' contains the compiled code by parcel and also included is a new index.html file.

Code Splitting

To better demonstrate some other features of Parcel, lets import modules from a different files. Parcel supports both CommonJs and Es6 module syntax for importing files.

CommonJS Syntax

Create a new file:

touch data.js

Fill it with:

// ./data.js 

module.exports = {
    name: "Olususi Oluyemi",
    designation: "Software Developer",
    hobby: "Writing"
}

Next, require this module and access properties within it from index.js file:

// ./index.js
const details = require('./data');

var content = "My name is " + details.name + "." + " I am a " + details.designation + " and I love " + details.hobby;

document.getElementById('content').innerHTML = content;

Here we required the module and write the content within it into the DOM.

Es6 Module Syntax

Lets do the same by using Es6 Module syntax. Change the content within ./data.js to :

export const details = {
    name: "Olususi Oluyemi",
    designation: "Software Developer",
    hobby: "Writing" 
}

In order to avoid undefined properties, change the mode of importing modules within index.js so that it can conform with Es6 Syntax.


    // ./index.js
    import { details } from './data';
    var content = "My name is " + details.name + "." + " I am a " + details.designation + " and I love " + details.hobby;
    document.getElementById('content').innerHTML = content;

The result should still be the same.

Hot Module Replacement

For improved development experience, Parcel’s hot module reloading implementation automatically updates modules in the browser without the need to refresh the page. This support is for both JavaScript and CSS assets. Lets try this out. Change the contents within ./data.js and see the live update immediately your files are been saved :

Transform

Another awesome feature of Parcel is the support for common transforms and transpilers like Babel, PostCSS and PostHTML. Babel can be used to transform JavaScript, PostCSS for CSS and PostHTML for HTML. Each one of these transpilers has a unique configuration file and once Parcel finds anyone of the config files, it will automatically run these transforms.

Working with Sass

To work with Sass we will need to install node-sass package:

npm install node-sass

Now create a sass file

    touch style.scss

Add some styling and import style.scss to index.js:

// ./style.scss

body  {
    color: red;
    padding-right: 1rem;
}

Don’t forget to import the style.css within index.js

// .index.js
import './style.scss';
// ...

Final Thought

Parcel is still very new and certainly will have more features added by the creator subsequently. There is no better bundler than another, I strongly believe in choosing the right tool for the job. But if you love simplicity and ease of set up, you definitely want to try parcel.

As we have learnt from this article, setting up parcel is very simple and the support for all kind of files and other mind blowing features is incredibly encouraging. Feel free to try this out in your new or existing project. For more details on other features, you can check here.

Hope you find this tutorial helpful. Kindly share your thoughts in the comment section below.

... more @ scotch.io

scotch.io