My first experience of using Snowpack

Do you think it is complicated to bundle your web application? Recently I saw a relatively new thing to me: Snowpack, it claims it can "Build web applications with less tooling and 10x faster iteration".

Let's have a look on how to build a simple React app with Snowpack!

Install Snowpack

First, install Snowpack.

npm install snowpack
## or use directly using "npx snowpack"

As I normally use React, so I decided to install React, rather than using Preact that recommends by the Official Guide. You need to install the react packages that support ESM, in order to use with Snowpack.

npm install react@npm:@reactesm/react react-dom@npm:@reactesm/react-dom

Then you can run npx snowpack after install. You will see a new folder called web_modules that contains react and react-dom.

Install Babel

npm i @babel/cli @babel/core @babel/plugin-transform-react-jsx @babel/preset-react @babel/preset-env serve

With .babelrc file in the root folder and add "snowpack/assets/babel-plugin.js" to the plugin, this is a crucial one if you need to import plugin by name, like import react from 'react'.

{
  "plugins": [
    ["@babel/plugin-transform-react-jsx"],
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    ["snowpack/assets/babel-plugin.js", {}]
  ],
  "presets": [
    "@babel/react",
    [
      "@babel/preset-env",
      {
        "targets": {
          "esmodules": true
        },
        "modules": "false",
        "useBuiltIns": false
      }
    ]
  ]
}

I added a npm script for babel in package.json:

"babel": "babel src/ --out-dir lib --watch"

Finally... React!

First, create a index.html at root folder (same folder as package.json).

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Snowpack - Simple Example</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/lib/index.js"></script>
  </body>
</html>

Create a folder called src and an index.js file inside, also create App component.

// index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App.js";

ReactDOM.render(<App />, document.getElementById("root"));

// in folder components/App.js
import React from "react";

const App = () => <div className="app">hello world</div>;

export default App;

Serve your site

Run babel src/ --out-dir lib --watch or npm run babel if you have create a script inside package.json, then simply run npx serve to serve your contents.

You should see "hello world" in your browser http://localhost:5000! Viola!

What I learn

It is a new way of thinking

Everything Snowpack runs is inside web_modules, it is a really different way of thinking, rather than using webpack or other bundling tools. As it is new way of doing things, there is not many documentation or tutorials, except the official one. For the things we used to, like hashing filename on build, hot loading while development etc... It is still unknown to me with Snowpack.

Besides of those unknown, it is really 10x easier if you need to start from scratch. You don't need to write webpack config and worrying about the development server, the speed of starting a new project could be really 10x faster than before.

This might be the future in the next 3-5 years!

Not every browser supported ESM

Like they stated in the Snowpack official guide, it only supports modern browser, which means... Goodbye IE11. I knew that still lots of company or sites in Asia, especially China, still need to support IE11, that means you cannot use Snowpack on those websites.

The documentation is important

As this project is relatively new, it doesn't have much documentation like webpack. it looks simple on the official guide, like for installing babel, it just only have four steps, but actually you need more than 4 steps to get it work and you can only know what to do by viewing the source of the demo.

So, which one is better? Snowpack or webpack?

It depends on what your usage is. If you are developing a static website or a simple landing page, this tool saves lots of setup time from scratch and it did optimization for you, so you don't need to worry about it.

If you are developing a fully functional web application, the webpack config is truly powerful and Snowpack did not have much config that you can tweak.

Nevertheless, whether to choose using Snowpack or not, the idea of using JavaScript modules (ESM) is definitely a thing. If we can get rid of supporting IE11 in the next 3-5 years, JavaScript modules (ESM) should be more popular in the future. It is worth it to have a look on it though!