Introduction to Module Bundler Snowpack

Published at:

24 January 2021

Available Translations:

ID,EN

Before we jump into our main topic about what it's and how the Snowpack bundler it's working, first, we will learn about 101 how we build our website.

Basically, web was made with three pilars inside it, HTML, CSS and JAVASCRIPT, looks these are the basic pilars that can build our website, looks easy right?

Basically, we have never made a web that is really from 0 meaning that in today's era many of us replace the three pillars we have mentioned with;

  • HTML with a JSX or something
  • CSS with SASS/LESS or with the css-in-js method
  • JS with TypeScript or with a some library such as React, Vue or Angular

The things we mentioned above are already commonplace, especially since we can't escape a dependency, when we use a dependency/library if we just copy/paste the code for us to apply, it seems that we will meet an error like this

require error example

Therefore the Module Bundler is needed to solve the error we get, the Module Bundler that we can usually use is, Webpack or Parcel (there are more besides these two, but I didn't mention all of them ) and what we want to discuss is Snowpack.

What it's Snowpack

Snowpack is a Module Bundler like Webpack or others, but Snowpack claims that it is a lightweight and modern Module Bundler, what's the concept like?

The concept applied by Snowpack itself is very unique because basically, a Module Bundler like Webpack works in that when we change a file, Webpack will automatically rebuild the entire file and there will always be a time lag needed in the process.

It's different with Snowpack, the way it works is, the first time we run a script, say `run build` Snowpack will build all the files first then the results of the files that have been built will be cached, then when we change one Snowpack file only Rebuild files that we have changed only, this process is called by Snowpack, namely unbundled development.

process snowpack

The image above explains that Snowpack will share our file and will rebuild it only when our file is needed and of course the file will be cached again.

Bundled vs Unbundled development

Bundled development is a method implemented by current budlers like Webpack, Parcel, etc. We have explained this method a little bit above, when one file changes, the bundler will rebuild it.

Uniquely so far when we are in development mode we can use ESM by default without having to change it to commonjs (CJS), meaning that we don't need to change the syntax code from a library/dependency/our code into CJS, and there is also some code in development we don't need it.

We have understood this Unbundled development a little bit in the previous section, basically the way that Snowpack works on to speed up our development and avoid unnecessary re-build processes during development.

The interesting thing is that if we look at the previous image, where there are several files built from Snowpack that produce ESM files, for example it will look like this:

BASH Code
02 LOC
1
node_modules/react/**/*     -> http://localhost:3000/web_modules/react.js
2
node_modules/react-dom/**/* -> http://localhost:3000/web_modules/react-dom.js

Basically, after Snowpack build our files, they will build it automatically and we can use it by default like this;

HTML Code
06 LOC
1
<body>
2
  <script type="module">
3
    import React from "react";
4
    console.log(React);
5
  </script>
6
</body>

Interesting, isn't it?

Example of usage

Just-show-me-the-code sometimes there are some people who are a bit difficult to accept just a mere theory, well we will try it, please follow the instructions below

BASH Code
04 LOC
1
mkdir learning-snowpackjs
2
cd learning-snowpackjs
3
yarn init -y
4
yarn add -D snowpackjs

And then, we will create `index.html` for running and make sure that Snowpack will running as well,

HTML Code
12 LOC
1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="utf-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1" />
6
    <meta name="description" content="Starter Snowpack App" />
7
    <title>Starter Snowpack App</title>
8
  </head>
9
  <body>
10
    <h1>Welcome to Snowpack!</h1>
11
  </body>
12
</html>

And don't forget to create script `start` at file `package.json`

JSON Code
08 LOC
1
{
2
  ...
3
  "scripts": {
4
    "start": "snowpack dev",
5
    "test": "echo \"Error: no test specified\" && exit 1"
6
  },
7
  ...
8
}

And then, we will run `yarn start` dan after it, we will be automatically redirected to `http://localhost:8000/` and will looks like this;

result snowpack

Next we will create the `index.js` and `hello-world.js` files, first we will fill the `hello-world.js` file like this,

JS Code
04 LOC
1
// hello-world.js
2
export function helloWorld() {
3
  console.log("Hello World!");
4
}

And on our `index.js` file;

JS Code
04 LOC
1
// index.js
2
import { helloWorld } from "./hello-world";
3


4
helloWorld();

And then, on our file `index.html` don't foget to apply our file `index.js` like this;

HTML Code
13 LOC
1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="utf-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1" />
6
    <meta name="description" content="Starter Snowpack App" />
7
    <title>Starter Snowpack App</title>
8
  </head>
9
  <body>
10
    <h1>Welcome to Snowpack!</h1>
11
    <script type="module" src="/index.js"></script>
12
  </body>
13
</html>

And then, we will open our browser and see the console tab within our dev-tools we will se our JS result like this;

Yep, interesting isn't it? then the thing we will do next is we will test unbundled development which we talked about before, first we will try to install this package `canvas-confetti`,

BASH Code
01 LOC
1
yarn add canvas-confetti

And then, we will change the `index.js` file to be like this;

JS Code
08 LOC
1
import { helloWorld } from "./hello-world";
2
import confetti from "canvas-confetti";
3


4
helloWorld();
5
confetti.create(document.getElementById("canvas"), {
6
  resize: true,
7
  useWorker: true
8
})({ particleCount: 200, spread: 200 });

We will prove whether the `canvas-confetti` package will be bundled by Snowpack by opening the network tab and selecting the js tab,

You see? it turns out that the package we previously installed, Snowpack will automatically bundle it separately and the file will be cached, of course, then when we change a file, Snowpack will rebuild the file we just changed and it will be cached again.

Conclusion

Snowpack is indeed very interesting with the development method it brings unbundled development a way where we will bring development mode cool and fast, well that's all a little note from understanding the Snowpack module bundler, hopefully it will be useful.

Thank you.