npm currently lists 59,851 ES modules . This makes up approximately 7% of total packages on npm are exporting an ES module, but the number is steadily increasing:
Pika makes it easy to search for these packages and the results will only include those that have a defined “module” entry point in their package.json manifest. Each listing consolidates the relevant information on one page, highlighting the important details.
@pika/web is an attempt to free web development from the bundler requirement. In 2019, you should use a bundler because you want to, not because you need to.
Schott created @pika/web to make it easy for developers to use ES modules, even when they don’t have compatible dependencies. It provides an install-time tool that is not exactly a build tool or a bundler but works to output web-native npm dependencies into a single ESM .js file:
@pika/web checks your package.json manifest for any “dependencies” that export a valid ESM “module” entry point, and then installs them to a local web_modules/ directory. @pika/web works on any ESM package, even ones with ESM & Common.js internal dependencies.
Installed packages run in the browser because @pika/web bundles each package into a single, web-ready ESM .js file. For example: The entire “preact” package is installed to web_modules/preact.js. This takes care of anything bad that the package may be doing internally, while preserving the original package interface.
Here’s a demo of how that works:
¡OJO con @pika/web!
Instala tus dependencias npm y úsalas directamente en el navegador.
Sin bundlers, ni configuraciones de ningún tipo.
Nativo, ESM, optimizado para http2… ¡y MUY rápido!
¡Muy pronto, vídeo más completo y artículo en //t.co/uc7bPEkbXB ! pic.twitter.com/cdNWqBnrDc
— Miguel Ángel Durán (@midudev) March 2, 2019
This week Schott announced the availability of a new Pika CDN for delivering modern ES module packages. It uses the pikapkg/web package builder to work with any ESM package and the CDN will automagically handle any non-ESM dependencies of that package. Pika CDN automatically detects the visitor’s browser and serves JS that is optimized to the environment, eliminating polyfills and transpiler bloat wherever possible.
“Pika CDN leverages your browser’s natural caching abilities to give your pages faster dependency load times, especially on first visit,” Schott said. “0ms first-loads are even possible (for your dependencies at least) if all packages have been seen before.
“Leaving my team was one of the hardest decisions I’ve ever made, but I know that I’m needed here,” he said. “I’m so excited to be a part of the future of the web, whatever it ends up looking like.”
Pika is looking for corporate sponsors. For now, Schott is funding the server costs using Patreon .