Parcel is my favorite project builder

Today we’ll talk about project builders (bundlers), tools that make life easier for developers. The essence of the work of bundlers is that they take the JavaScript code contained in many files and pack it into one or more files, ordering and preparing them for work in browsers in a certain way. Moreover, thanks to various plug-ins (plug-ins) and loaders, the code can be minified, other resources (such as CSS files and images) can be packaged, in addition to the code. Bundlers allow you to use preprocessors; they can split code into fragments that load when necessary. But their capabilities are not limited to this. In fact, we are talking about the fact that they help organize the development process.







There are many bundlers. For example - Browserify and webpack . Although these project builders are great tools, I personally found them difficult to set up. Where to start setup? This question is especially relevant for beginners, for those who may be a little scared by such a thing as a “configuration file”.



That is why I usually use the Parcel project builder . I stumbled upon this bundler by accident when I watched one training video on YouTube. There were tips to speed up development. The work environment shown in this video was heavily tied to Parcel. After that, I decided that I should try this bundler.

Parcel Features

What I like most about Parcel is that it requires no configuration at all. That's right: you do not need to configure it. In this regard, Parcel outperforms webpack , where settings can be scattered across several files and represent whole “sheets” of code. The developer, setting up webpack, may have taken something from the configuration files of other programmers. It is possible that the settings are simply entirely copied from other projects. It is clear that the complexity of the configuration depends on the developer, but even when setting up webpack for a small project, you need to use a certain set of plugins and install certain options.



That is why the use of Parcel seems to me a coup. For example, if a developer plans to stylize his project using SCSS or LESS, then he can, without unnecessary movements, simply write the appropriate code. Want to use the latest JavaScript features? If so - you can, without thinking about anything, write code using these features. Need a server for development? The one who uses Parcel has such a server. In fact, here we just barely touched the tip of the iceberg of Parcel's vast capabilities .



Parcel allows the programmer, without wasting time on anything secondary, simply take and start work on the project. This is the main advantage of using it as a bundler. Parcel, in addition, processes files and builds projects very quickly, using the capabilities of multi-core processors, while other bundlers, including webpack, performing slower and more complex code transformations work more slowly.

Scope of use of Parcel

Parcel, like any other tool, is not some universal tool, one that is equally well applicable always and everywhere. But there are situations in which Parcel is particularly successful.



I have already talked about how quickly Parcel allows you to enter a functioning project. Thanks to this, it is ideal for working in tight time frames and for creating prototypes. We are talking about situations where time is expensive, and when the goal of developers is to create a working application as quickly as possible.



This does not mean that Parcel is not suitable for complex applications, or for projects in which large teams of programmers participate. Parcel performs well in such conditions. However, I realized that large-scale projects can benefit from manually adjusting workflows.



To compare a bundler that does not need settings with a bundler that needs to be configured is how to compare cars with an automatic and a manual transmission. Sometimes the driver may need to control more details, and sometimes less.



I was working on one multi-page site, in the depths of which there was a lot of JavaScript code. Parcel performed well in this project. He gave me a server, he compiled Sass in CSS, added prefixes of browser manufacturers to the code, if necessary, and allowed, without any settings, using export and import commands in JavaScript files. All this greatly facilitated my work on the project.

Creating a simple website using Parcel

Let's arrange a Parcel test drive. This will allow us to see that creating something with this bundler is relatively simple. Here is the page on which we will work.









Pilot Project Page



We are going to create a simple site that will use Sass and some JavaScript. We will display information about the current day of the week and a random image downloaded from Unsplash Source on the website page.

▍Base structure of the project

The project, which is planned to use Parcel, does not need a special structure of files and folders. It does not have to use a certain framework. The basic structure of the project will consist of three files whose names speak for themselves. These are index.html



, style.scss



and index.js



. You can create them the way you like. For example, using the command line:

 mkdir simple-site cd simple-site touch index.html && touch style.scss && touch index.js
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Add a little template code and markup to the index.html



file on which the project’s functionality will be based:

 <!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">  <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">  <link rel="stylesheet" href="style.scss">  <title>Parcel Tutorial</title> </head> <body>  <div class="container">    <h1>Today is:</h1>    <span class="today"></span>    <h2><font color="#3AC1EF">and the image of the day:</font></h2>    <img align="center" src="https://source.unsplash.com/random/600x400" alt="unsplash random image"> </div> <script src="index.js"></script> </body> </html>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

You may have noticed that here I am downloading a web font ( Lato ) from Google Fonts. Using downloadable fonts is voluntary. Here it is worth paying attention to connecting CSS and JavaScript files, and to the HTML code of the document body, which provides a place for outputting information about the day of the week, and a place for outputting a random image from Unsplash. As a matter of fact, on this the work on the basic structure of the project is completed.

▍Miracle of quick preparation of Parcel to work

Now, before moving on to styling and scripting, let's try to run our project using Parcel. There is nothing unusual about the Parcel installation:

 npm install -g parcel-bundler #  yarn global add parcel-bundler
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Now initialize the project using npm or yarn, which will lead to the creation of the package.json



file:

 npm init -y #  yarn init -y
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

That's all! No further settings need to be made. All that remains for us to do is tell Parcel about which file is the project's entry point. This will allow the bundler to find out what his server needs to give to clients.



In our case, this file will be index.html



:

 parcel index.html
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

After the server starts successfully, the following will be displayed in the console:

 Server running at http://localhost:1234 √ Built in 13ms.
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

The Parcel server supports a hot boot. The bundler rebuilds the application each time the changes made to the project files are saved.



Let's go back to the project folder. Here you can see the new folders and files created by the bundler.









New folders and files created by the bundler



We are particularly interested in the dist



folder. It contains all the compiled code, including code maps for CSS and JavaScript.

▍ Continuation of work on the project

Let's style.scss



file and get acquainted with how Parcel processes the Sass code. I created here several variables used to store the colors and width of the container in which the contents of the page are placed:

 $container-size: 768px; $bg: #000; $text: #fff; $primary-yellow: #f9f929;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Now, in the same file, add style descriptions. Here you can create what you like. For example, I did this:

 *, *::after, *::before {  box-sizing: border-box; } body {  background: $bg;  color: $text;  font-family: 'Lato', sans-serif;  margin: 0;  padding: 0; } .container {  margin: 0 auto;  max-width: $container-size;  text-align: center;  h1 {    display: inline-block;    font-size: 36px;  }  span {    color: $primary-yellow;    font-size: 36px;    margin-left: 10px;  } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

As soon as this file is saved, Parcel will start working, compile everything, and reload the page in the browser. We do not need to do anything other than save the file. Parcel, by default, monitors file changes.



Here's what the page will look like after styling.









Stylized page



It remains only to display here the name of the current day of the week. In the course of solving this problem, we will use the import and export teams. This will test Parcel's ability to work with modern JavaScript mechanisms.



Create a file today.js



and export from it a function that returns, using an array with the names of the days of the week, the name of the current day:

 export function getDay() {  const today = new Date();  const daysArr = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];  return daysArr[today.getDay()]; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Note that the getDay



function getDay



first day of the week.



We exported the today.js



function from getDay



. Now let's go to the index.js



file and import this function into it from the today.js



file. This will cause the today.js



file today.js



be processed during the assembly of the project.

 import { getDay } from './today';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Parcel, without any additional settings, supports the syntax of ES6 modules , so we can use the import and export commands in JS files.



Now we just have to select the corresponding <span>



element and pass the value returned by the getDay



function getDay



. Add the following code to index.html



:

 const day = document.querySelector('.today'); day.innerHTML = getDay();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

After saving the file, the project will be rebuilt, its page in the browser will change.









Finished project

▍Building a project for production

We created the application, and now we want to put it somewhere. It can be our own server, or something like Surge or Now , which makes publishing web projects as simple as possible. At the same time, we need the project code to be compiled and minified.



To bring the project into a form suitable for publication, we only need a single command:

 parcel build index.html
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

After running this command, the console will get something similar to the one shown in the following figure.









Project assembly



Now we have at our disposal the resources of the application, ready to deploy it in production. Here you can read more about how Parcel collects production versions of projects, and find some tips that will improve the efficiency of working with this bundler.

Summary

I have said this several times already, but I will repeat it again: Parcel is a great tool. It allows you to collect projects, compile code, gives the development server a programmer, preprocesses and postprocesses resources, minifies the code. And his abilities are not limited to this. Here we looked at probably an extremely simple example, but I hope that it allowed you to feel the capabilities of Parcel and helped to learn how to use this bundler in your projects.



Dear readers! Which bundler do you use?