Introduction to Module Bundler Snowpack

Learn what it’s Snowpack Module Bundler — but you will find a disclaimer on a bit down about Snowpack.

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

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?

Bundled vs Unbundled development

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

node_modules/react/**/*     -> http://localhost:3000/web_modules/react.js
2
node_modules/react-dom/**/* -> http://localhost:3000/web_modules/react-dom.js
<body>
<script type="module">
import React from "react";
console.log(React);
</script>
</body>

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

mkdir learning-snowpackjs
cd learning-snowpackjs
yarn init -y
yarn add -D snowpackjs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Starter Snowpack App" />
<title>Starter Snowpack App</title>
</head>
<body>
<h1>Welcome to Snowpack!</h1>
</body>
</html>
// hello-world.js
export function helloWorld() {
console.log("Hello World!");
}
// index.js
import { helloWorld } from "./hello-world";
helloWorld();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Starter Snowpack App" />
<title>Starter Snowpack App</title>
</head>
<body>
<h1>Welcome to Snowpack!</h1>
<script type="module" src="/index.js"></script> // <- add this
</body>
</html>
yarn add canvas-confetti
import { helloWorld } from "./hello-world";
import confetti from "canvas-confetti";

helloWorld();

confetti.create(document.getElementById("canvas"), {
resize: true,
useWorker: true
})({ particleCount: 200, spread: 200 });

Conclusion

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

--

--

Currently doing some stuff on Web Platform and learn managing a team.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Adib Firman

Currently doing some stuff on Web Platform and learn managing a team.