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