If you’ve ever configured Webpack, Parcel will blow your mind!
By: Ibrahim Butt
Tags: JavaScript, Web Development, Programming, Webpack, React

Using Parcel: See yourself how easy it is

I’m going to walk you through setting up Parcel, to use Pug, Sass, Babel and autoprefixing via PostCSS. The first time I installed Parcel, I was actually finished in under 9 minutes.

Lets Get To It

1 — Structure and Files

Make a new folder that will serve as the root directory. Inside that folder, create more folders and some files:

root-folder

--/ src

---/ pug

---- index.pug

---/ sass

---- main.sass

---- _background.sass

---/ js

---- main.js

---- message.js

You don’t need to follow this structure, it’s not required by Parcel. Its common practice to have a src folder where you write all your code. From here, it’s compiled and/or transformed then output to dist .

2 — Installing Parcel and Pug

Run the following command in the root directory:

npm init -y && npm install --save-dev parcel-bundler

That’s it. Parcel and the rest are set up, except for autoprefixer. It needs a .postcssrc file.

Continue with the rest of the article. Keeping in mind from now on, you’re not actually configuring Parcel.

3 — Lorem Ipsum?

Inside index.pug , paste in:

<!DOCTYPE html>

html(lang="en")

head

link(rel="stylesheet", href="../sass/main.sass")

body

script(src="../js/main.js")

If you chose a different structure for organising your files, change the paths.

Inside _background.sass , apply a background colour to body . I went with green, to signify Sass is working as soon as the development server loads. Import _background.sass to main.sass . To ensure PostCSS and autoprefix are working, I added the following to main.sass :

::placeholder

color: grey

For message.js , what I did is write a function that prints a string to the console, using an ES6 arrow function:

export default (message) => {

console.log(message);

};

For main.js , import message and use it:

import message from "./message"; message('Hello World!');

To get autoprefixer to work, we need to write a .postcssrc file inside the root directory:

{

"plugins": {

"autoprefixer": true

}

}

This lets PostCSS know we want to use the autoprefixer plugin.

With Parcel, we don’t need a .babelrc for Babel. If you need anything other than Babels default functionality, you will need to create one. By default, Parcel will compile code for browsers that have more than 1% market share.

4 — Scripts

Parcel comes with a build mode. It minifies JavaScript, HTML and CSS using uglify-es, htmlnano and cssnano. All transformed and compiled files are output to dist inside the root.

We are going to setup two scripts. One which will start Parcel and its development server. Another for production using the build mode.

Paste this to package.json :

"scripts": {

"start": "parcel src/pug/index.pug --open",

"build": "parcel build src/pug/index.pug"

}

5 — Done!

Use npm run start to use Parcel for the first time. It’ll take a little longer than usual since it’s the first time.

The development server will open your default browser. The first thing you should notice is the background colour. This, of course, means Pug did transform to HTML and Sass to CSS.

Now open up the console, you will have a message.

While you’re in the developer tools, check out the CSS. ::placeholder is prefixed.

Have a look at the JavaScript file and look for var _message . If it’s not in the first JavaScript file, it will be in the second one. In my experience, its the second one.

If you met all the above ‘conditions’, congratulations. You have installed and setup Parcel to work with Pug, Sass, Babel and PostCSS.

Conclusion

As you can see, you can hit the ground running with Parcel. Keep in mind that Parcel was released in December 2017 — its still in infancy. I expect a lot more zero-config features in the future.

Of course, a lot of users will need to configure Parcel and that’s expected. It can’t have native support for everything. The point is, Parcel is very easy to use from the get-go. That’s what I’m trying to showcase here and not just it’s ‘zero-config’ capabilities. Hopefully, this approach to usability will be applied to its configuration too. In contrast to Webpack, that’s big.

I do like Webpack, I just don’t like setting it up. In the end, it’s a matter of preference.

I won’t be looking back at Gulp or Webpack for future projects unless I have to. What are your thoughts? Will you give Parcel a try or are you happy with Webpack?