Where to Discuss?

Local Group

Table of Content

Preface

Goal: Put the whole stuff together using parcel bundler.

We have already discussed a webpack example, and then rollup example, both targeting modern web development. There is also a popular bundler called parcel.

In contrast with long config webpack, this parcel thing can have zero configuration.

Source Examples

You can obtain source examples here:


Example: In a Nutshell

Parcel is also a bundler, without complex configuration

How does it looks like?

Supposed that you have these source assets:

src
├── assets.js
├── css
│   ├── button.css
│   ├── color.css
│   └── main.css
├── html
│   └── alert.html
└── js
    └── script.js

All the sources, including html, css, and js, will be bundled into one javascript, one stylesheet, and one html document.

dist
├── index.html
├── assets.2158d4e5.css
└── assets.2158d4e5.js

Very similar with webpack ,and rollpack.

I hope this explains 🙏🏽.

Official Documentation

You should read this first.

This article is useless if you never touch the official documentation.

Difference

parcel enable zero configuration. Command line configuration can be stored in package.json.

Learn by Example

This article use previous example, converted to parcel configuration, explained step by step.


1: Plain: HTML + CSS + JS

Consider start with simple assets.

Objective

First time parcel.

Directory Tree

Consider this source directory below:

└── src
    ├── css
    │   └── style.css
    ├── html
    │   └── index.html
    └── js
        └── script.js

Example Assets

The assets are:

While the src/html/index.html contain this header:

  <head>
    <meta charset="utf-8">
    <title>Example Plain</title>
    <link href="../css/style.css" rel="stylesheet" type="text/css">
    <script src="../js/script.js"></script>
  </head>

package.json

We can setup package.json as below:

  "scripts": {
    "dev": "parcel src/html/index.html",
    "build": "parcel build src/html/index.html"
  },
  "devDependencies": {
    "parcel-bundler": "^1.12.4"
  }

Command Line Interface

parcel utilize command line argument, instead of configuration. Therefore, long command line is pretty common.

You can either use parcel command for development, and examine the result right away in localhost:1234. You can also npm run dev as set in package.json.

❯ parcel src/html/index.html
Server running at http://localhost:1234 
✨  Built in 2.71s.

CLI: parcel

Or you can either use parcel build, or npm run build command for production, and examine the result using you own web server.

❯ parcel build src/html/index.html
✨  Built in 779ms.

dist/style.ffae417e.css.map    1.84 KB     7ms
dist/script.9ce76c64.js        1.39 KB    19ms
dist/index.html                1.21 KB     6ms
dist/style.ffae417e.css          994 B    13ms
dist/script.9ce76c64.js.map      924 B     2ms

CLI: parcel build

Personally, I like to use parcel build command in development, so I can examine all generated files.

View in Browser

You can just open the localhost:1234 in browser. You will see something similar like this below:

Parcel:

Example HTML Output

While the dist/index.html contain this header:

  <head>
    <meta charset="utf-8">
    <title>Example Bundle</title>
    <script src="/assets.2158d4e5.js"></script>
  <link rel="stylesheet" href="/assets.2158d4e5.css"></head>

Transformed from src/html/index.html above.


2: Bundle

How about bundling two or more stylesheet together?

Objective

A bundle example.

Directory Tree

Consider this source directory below:

└── src
    ├── assets.js
    ├── css
    │   ├── button.css
    │   ├── color.css
    │   └── main.css
    ├── html
    │   └── alert.html
    └── js
        └── script.js

These has three stylesheets.

package.json

  "scripts": {
    "dev": "parcel src/html/alert.html --out-file index.html",
    "build": "parcel build src/html/alert.html --no-source-maps --out-file index.html"
  },
  "devDependencies": {
    "parcel-bundler": "^1.12.4"
  }

Example of Separated Assets

Consider src/html/index.html contain this file:

  <head>
    <meta charset="utf-8">
    <title>Example Bundle</title>
    <link href="../css/main.css"   rel="stylesheet" type="text/css">
    <link href="../css/color.css"  rel="stylesheet" type="text/css">
    <link href="../css/button.css" rel="stylesheet" type="text/css">
    <script src="../js/script.js"></script>
  </head>

If we do this parcel command as usual, we would have this complex result as below:

❯ parcel build src/html/index.html
✨  Built in 8.00s.

dist/script.9ce76c64.js         1.39 KB    727ms
dist/index.html                 1.34 KB    1.57s
dist/button.6de34fe4.css.map    1.07 KB     21ms
dist/script.9ce76c64.js.map       924 B      4ms
dist/color.98f5d4f3.css.map       566 B     21ms
dist/button.6de34fe4.css          546 B    6.30s
dist/main.ae68bab5.css.map        502 B     21ms
dist/color.98f5d4f3.css           290 B    6.30s
dist/main.ae68bab5.css            254 B    6.30s

Parcel:

What a mess ??

Example of Bundled Assets

Now consider src/html/alert.html contain this file:

  <head>
    <meta charset="utf-8">
    <title>Example Bundle</title>
    <script src="../assets.js"></script>
  </head>

In which the assets.js only consists of imported statement as below:

import './js/script.js'
import './css/main.css'
import './css/button.css'
import './css/color.css'

Let’s do this parcel command again, with a few argument adjustment:

❯ parcel build src/html/alert.html --no-source-maps --out-file index.html
✨  Built in 3.74s.

dist/assets.20f97c1e.js     1.65 KB    2.47s
dist/index.html              1.2 KB    1.14s
dist/assets.24105bc7.css      946 B    2.01s

Parcel:

Wow…!

Example HTML Output

Consider have a look at our final result. The dist/index.html header:

  <head>
    <meta charset="utf-8">
    <title>Example Plain</title>
    <link href="/style.d1edd1db.css" rel="stylesheet" type="text/css">
    <script src="/script.f5aa2ae4.js"></script>
  <script src="/style.d1edd1db.js"></script></head>

Transformed from src/html/alert.html above.


3: Stack: Pug + Stylus + Coffeescript

What if I do not use standard assets? Instead of html+css+js, I can use other stack such as pug+stylus+coffeescript.

Objective

A complete stack example

Directory Tree

Consider these sources below:

The first one is pretty basic, using pug+css+js.

└── src
    ├── css
    │   └── style.css
    ├── js
    │   └── script.js
    └── pug
        ├── index.pug
        └── partials
            └── body.pug

And the second one is enhanced, using pug+stylus+coffeescript.

└── src
    ├── css
    │   └── style.styl
    ├── js
    │   └── script.coffee
    └── pug
        ├── alert.pug
        └── partials
            └── body.pug

Parcel: Nerdtree Assets

package.json

Consider adjust the script command as needed.

  "scripts": {
    "dev": "parcel src/pug/alert.pug --out-file index.html",
    "build": "parcel build src/pug/alert.pug --no-source-maps --out-file index.html"
  },
  "devDependencies": {
    "parcel-bundler": "^1.12.4",
    "pug": "^2.0.4",
    "stylus": "^0.54.7",
    "coffeescript": "^2.5.1"
  }

Notice a few additional dependencies.

Example of Basic Stack

Consider this src/pug/index.pug below:

doctype html
html(lang="en")

  head
    meta(charset='utf-8')
    title Example Stack
    link(href='../css/style.css', rel='stylesheet', type='text/css')
    script(src='../js/script.js')

  body
    include partials/body.pug

Consider running the parcel command:

❯ parcel build src/pug/index.pug --no-source-maps
✨  Built in 11.05s.

dist/script.ba062b13.js    1.34 KB    291ms
dist/index.html            1.19 KB    2.17s
dist/style.150d1f3d.css      946 B    8.75s

pug successfully build.

Example of Complete Stack

Consider this src/pug/alert.pug, using stylus and coffeescript as below document:

doctype html
html(lang="en")

  head
    meta(charset='utf-8')
    title Example Stack
    link(href='../css/style.styl', rel='stylesheet', type='text/css')
    script(src='../js/script.coffee')

  body
    include partials/body.pug

Consider running the parcel command. Note that you can always use npm run build shorthand, instead of this long command below:

❯ parcel build src/pug/alert.pug --no-source-maps --out-file index.html
✨  Built in 5.53s.

dist/script.78bb67b2.js    1.37 KB    4.51s
dist/index.html            1.19 KB     24ms
dist/style.150d1f3d.css      946 B    5.37s

pug+stylus+coffeescript also successfully build.

Example HTML Output

Consider have a look at our final result. The dist/index.html header.

❯ cat dist/index.html | prettier --parser html
...
  <head>
    <meta charset="utf-8" />
    <title>Example Stack</title>
    <link href="/style.0cb376f7.css" rel="stylesheet" type="text/css" />
    <script src="/script.8529ffc2.js"></script>
    <script src="/style.0cb376f7.js"></script>
  </head>
...

Transformed from src/pug/alert.pug above.

Conclusion

It is so easy to use parcel for simple task.


What’s Next?

All is done by now!

thankyou for reading.