Put your skeletons in the closet - Build your next project using Parcel

by Martijn — 4 minutes

When your project grows in size or complexity, your front-end build will probably grow as well. You might use setup for end-to-end testing, unit testing, sass compiling, linting, transpiling, etc.

The way we configure our front-end builds has changed quite a bit over the past years. It used to be common practice for an organisation (or individual) to have a seed or skeleton to set up a new project. Maintaining this skeleton in the ever-changing world of front-end is serious work.

We got used to grunt or gulp files which should be easily adaptable, but can become quite a mess when you have to deal with a lot of tasks. And all those tasks might be hard to adapt or upgrade when you copy them or share them over multiple projects.

Nowadays, with webpack it’s still quite the same. For every step in your build you can find a plugin, but you still need to configure that plugin. In other words, still some hassle.

Wouldn’t it be great to have no hassle at all? To abstract away all the configurations?

Relying on Proven Standards

Luckily, today there are some alternatives for maintaining customised build configurations that make development life much easier. When you don’t want to start from scratch in every new project, you can rely on open source community standards for building your application.

We can, for example, work with command line interface tooling that can create our build configuration interactively. You might know this from the various CLI tools that come with modern front-end frameworks like React, Vue or Angular. The CLI tool will ask you which plugins you want to use in your project.

This already improves the developer experience a lot. But, still, there’s not really ‘one’ default configuration. You’ll always need to adapt the build steps to your own needs, because what comes out of the box is hardly ever enough. Time for a change!

There’s a new kid in town: Parcel. Parcel is the kid that doesn’t ask anything, it will just make sure that everything you want works out of the box. All the configuration is abstracted behind the scenes.

Zero Configuration

Parcel’s great power is zero configuration. Meaning you don’t need a config file.

Webpack 4 also has zero configuration, but the only things you don’t have to configure are the default input and output files. For all the rest you still need your webpack.config.js Great comparison of webpack and parcel: https://blog.jakoblind.no/parcel-webpack/

What does it mean to have zero configuration with Parcel?

A few examples

Start with:

npm init -y && npm i -g parcel-bundler
  • When you want to run a web development server with hot reloading enabled, simply run in the root of your project: (assuming you have an index.html in the root of your app)
parcel index.html

or add it to your package.json:

{
  "scripts": {
    "start": "parcel index.html"
  }
}
  • Transforming modules with Babel, PostCSS, PostHTML work out of the box.
  • When you love to work with typescript like I do, just add typescript to your project:
npm i -D typescript

adapt the index.html:

<!DOCTYPE html>
<html lang="en">
  <head> </head>
  <body>
    <script src="./index.ts"></script>
  </body>
</html>

and run:

npm run start
  • When you want to use SCSS:
npm i -D sass

import './style.scss';

or even put the scss link directly in your html:

<link rel="stylesheet" href="./style.scss" />

Parcel will do everything behind the scenes. The only thing you’ll have to repeat when you create a new project, is installing the right dependencies. To see what it is that parcel can do for you without extra configuration, take a look at the docs and start your next project with zero configuration!

meerdivotion

Cases

Blogs

Event