When you are starting to develop a new, simple, static site, how do you start? Do you just create an index.html file and link a style.css sheet? What about if you want to use JavaScript module bundling, Sass, and minification of your final project?

If you want to make use of these features you can end up spending a fair bit of time installing and setting up the necessary pre-processors and tools, preventing you from getting started with your simple project.

If you want to spend more time writing code than setting up your tooling, you might be interested in using Parcel.js.

_The completed code for this article can be found at _https://github.com/codebubb/parcel-example

What is Parcel.js?

Parcel is a bundling tool which takes your source files like Sass, JavaScript, and TypeScript and processes them into a format that is useable by the browser. If you’ve used Webpack before then you’ll be familiar with this process.

The main difference with Parcel and other bundling tools is that it requires no configuration, it’s really fast and, as you’ll see, it handles installing of any extra dependencies required for you.

Installation

You can install Parcel globally so you can use it anywhere on the command line:

npm install -g parcel

Alternatively, you can install it as a dev dependency as part of your project.

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

I’m going to take the second option for the rest of this tutorial to show you how you can make use of Parcel within your own projects.

Adding Source Files

With Parcel installed as a dependency of our project, let’s create some source files. Typically, I like to create a src folder and then have separate subfolders for Sass, JavaScript files etc. However, you can structure your project in whichever way you prefer.

myProject/
|── node_modules
|── src/
|   |── index.html
|   |── img/
|   |── scss/
|   |   |── styles.scss
|   |── js/
|   |   | - app.js
|── package.json
|── package-lock.json

Next, let’s add some content to our HTML file.

Notice how we can point our <link> tag directly to the SCSS file we’ve created and also the same for our JavaScript.

#programming #javascript #web-development-tools #web-development #software-development