Skypack — Load optimized npm packages with no install and no build tools

I was delighted to read that CodePen now has built-in support for Skypack. This is a huge step forward to working with packages on CodePen. Great addition to the product!

But what exactly is Skypack? Well, it’s the successor to the aforementioned Pika CDN with some extra juice: Skypack not only serves packages that export ES Modules, it also converts packages that export older CommonJS Modules to ES Modules while at it.

Ever tried to load JavaScript from a CDN and realized that it doesn’t work in a browser without a bundler? Skypack operates like your favorite CDN but with an important difference: packages are preoptimized for browser use.

But Skypack doesn’t stop there: it handles minification, browser polyfilling, gzip/brotli, HTTP/3, caching, and more!

Skypack is free to use for personal and commercial purposes, forever. The basic CDN is production-ready and is backed by Cloudflare, Google Cloud, and AWS. We’re fully committed to building a core piece of infrastructure you can rely on.

Fred K. Schott, one of its authors, announced it this summer at ESNext Conf — a virtual conference which I also gave a talk at.

(Fast forward to the 18 minute mark to get to the Skypack part)

Here’s a simple Confetti example:

See the Pen
by Chris Coyier (@chriscoyier)
on CodePen.

Neat, right?

Skypack — Load optimized npm packages with no install and no build tools →
Skypack + CodePen →

Pika CDN – A CDN for modern JavaScript

Yesterday the aforementioned Pika announced some new things. One of the things that stood out is Pika CDN:

The Pika CDN was built to serve the 60,000+ npm packages written in ES Module (ESM) syntax. This module syntax runs natively in the browser, so you can build for the web without a bundler.

With our CDN, package authors can distribute more modern, unminified packages without worrying about how to serve them directly. Instead, our nifty package-builder automatically resolves each package — and any legacy sub-dependencies — into a single, minified, ready-to-import JavaScript file.

Nice! Do note that versioning is limited:

🤔 I do wonder if something like Subresource Integrity will land for ES Modules … and oh, don’t we need to self-host our assets? Computering is hard, ugh! #nuance

Pika CDN →

Related: The previously mentioned create-es-react-app also touches directly importing ES Modules