Exploring parcel with Vue.js, the webpack alternative
Tags: javascript, webdev, vue, beginners
Published: 2018-04-16 21:37:33

---
title: Exploring parcel with Vue.js, the webpack alternative
published: true
description: Creating a project with parcel from scratch.
tags: javascript, webdev, vue, beginners
---
# Exploring parcel with Vue.js, the webpack alternative
> This article is great for beginners as I would demonstrate how to build a website from scratch.

Just before 2018 started, the webdev community seems to begin to realise the madness of the config hell of the frontend tools. Webpack, babel, sass, postCSS, postHTML, dev servers, prod servers... The number of lines used to configure the dev tools was almost catching up the actual number of lines of an application!

This is where the term 'zero-configuration' starts to gain its popularity. I discovered [Poi](https://poi.js.org/#/) late November and bet that it was going to be the biggest thing of frontend devs in 2018 Q1. Then [Parcel](https://parceljs.org/) came along in December presenting us with a even more generic bundler. Then [@vue/cli 3.0](https://github.com/vuejs/vue-cli) is presented in the [Vue.js Amsterdam Conference 2018](https://www.youtube.com/watch?v=TRJMT9yjONQ) which introduces another zero configuration way of creating a Vue project.

Today we will be looking into Parcel and see how easy it is to adopt in our project. You should be surprised by how easy it is if you have used webpack before.

# Create the project directory and initiate the project

> Snapshot for this section: https://github.com/ycmjason/parcel-article/tree/28fc86bb20634504fd6ef6c8c5d2596a6af3a370
```bash
mkdir parcel-article && cd $_
```

The above is a very common command for creating a new directory and go into it directly.

```bash
git init
gitignore init node
npm init -y
```

- `git init` creates `.git/`.
- `gitignore init node` creates my predefined node [gitignorer](https://dev.to/ycmjason/how-to-create-gitignore-file-with-predefined-templates-dfg) profile. 
- `npm init -y` creates `package.json`, which we could record the dependencies needed by our project.

```bash
git add -A
git commit -m 'initial commit'
```

- `git add -A` tells git to track all files in the current directory
- `git commit -m 'initial commit'` commit the file changes with the message 'initial commit'


# The "Hello world" website
> Snapshot for this section: https://github.com/ycmjason/parcel-article/tree/2cf411c403335032859d7b496153869f597d72e0

So let's create a simple static website which shows "Hello world" and logs "hello world" to the console.

```html
<!-- index.html -->
<html>
    <body>
        Hello world!
        <script src="src/main.js"></script>
    </body>
</html>
```

```js
// src/main.js
console.log('hello world');
```

Let's install parcel which provides us with the dev server. 

```bash
npm i --save-dev parcel-bundler
```

The above command would install `parcel-bundler` into `./node_modules/` and add it to the `devDependencies` in `package.json`. This allow our application to be built even when `parcel-bundler` is not installed globally. 

```js
// package.json
{
  "name": "parcel-article",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "parcel index.html", // !!! this is added !!!
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "Jason Yu <me@ycmjason.com>",
  "license": "ISC",
  "devDependencies": {
    "parcel-bundler": "^1.7.1"
  }
}

```

I added the `dev` npm script to start the dev server provided by parcel. We can run this npm script by doing:

```
$ npm run dev

> parcel-article@0.0.1 dev /tmp/parcel-article
> parcel index.html

Server running at http://localhost:1234 
✨  Built in 521ms.

```

Open your favorite browser, go to http://localhost:1234 and we should see "Hello world!" displayed. Looking at the console we should also see `hello world`.

This server also comes with hot module replacement. To demonstrate this, keep the server running, and change `src/main.js` to:

```js
// src/main.js
console.log('bye world');
```

Going back to your browser and you will see another log on your console that says `bye world`. 

Now we can commit our changes.

```
$ git status
On branch master                                                 
Your branch is up to date with 'origin/master'.                            
                                               
Changes not staged for commit:                             
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)
                                                                           
        modified:   package.json                                
                                                           
Untracked files:                
  (use "git add <file>..." to include in what will be committed)
                         
        .cache/                                                 
        dist/
        index.html                                               
        package-lock.json                                  
        src/     
                                                           
no changes added to commit (use "git add" and/or "git commit -a")
```

Notice that git is saying that we have `.cache/` and `dist/` that are untracked? `.cache/` is used by Parcel, the secret behind why it runs so fast. `dist/` is where Parcel bundles our application into. We don't have to commit them into git. So I added them to `.gitignore` to ignore them.

# What's next?
In the upcoming articles, we will look at how we could very easily add Vue, babel and sass to our project.