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 late November and bet that it was going to be the biggest thing of frontend devs in 2018 Q1. Then Parcel came along in December presenting us with a even more generic bundler. Then @vue/cli 3.0 is presented in the Vue.js Amsterdam Conference 2018 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

mkdir parcel-article && cd $_

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

git init
gitignore init node
npm init -y

git init creates .git/.
gitignore init node creates my predefined node gitignorer profile.
npm init -y creates package.json, which we could record the dependencies needed by our project.

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.

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

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

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

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.

// 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:

// 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.