Snowpack and React


Recently I delved into the world of Snowpack after hearing about it on the Syntax podcast with glowing reviews coming from the team talking about its fast compile times and wealth of different features including but not limited to:

  • Plugins

  • Fast Refresh (Multiple frameworks)

  • ESM-Build

  • Skypack (Streaming Imports)

These different features make it great for react projects (as I did with JaycarSort) as well as projects using other frameworks like Svelte and Vue.

Other Bundlers

The project I mentioned above is designed to be opened using a simple file browser not hosted on the web or any specific machine but only accessible through the file system. This presented a few problems when it came to using ESModules and Cors because when a module is loaded rather than a script Cors checks are run to prevent the loading of said scripts if they're accessed using the file system. To circumvent this issue I ended up using @snowpack/plugin-webpack which is recommended by the Snowpack site anyway whilst ESBuild is still in development. After adding the Snowpack webpack plugin there were minimal issues which changing the optimize target to `es2018` fixed.

```typescript

module.exports = { plugins: ["@snowpack/plugin-webpack"], optimize: { target: "es2018", }, };

```

Skypack

One of the other great features that I neglected as of yet to mention is Skypack which is fully supported by Snowpack meaning that production builds don't require the downloading and compiling of every module you plan to use but only that you reference the Skypack URL or instead with Snowpack's automatic Streaming Imports. In a production environment, this can remove dependency managers like NPM or Yarn entirely reducing the complexity of deployment.

Fast Refresh and HMR

Fast refresh is a feature many people take for granted when it comes to developing a new application with programs like Create React App having it built-in. With snowpack, fast refresh and HMR are available for a variety of frameworks.

Conclusion

Snowpack is an awesome tool for the ever-evolving world of frameworks with its revolutionary features catering to a wide audience looking for stability and flexibility in their programming environments.