web

???? ✨ Install npm dependencies that run directly in the browser. No Browserify, Webpack or import maps required.

Logo

@pika/web • Install npm dependencies that run directly in the browser. No Browserify, Webpack or import maps required.

Logo


npm on Dec 6, 2018 – “JavaScript in 2018 is somewhat notorious for requiring a lot of tooling to get going, which is quite a reversal from the situation in 2014… All of our survey respondents would like to see less tooling [and] less configuration required to get started.”


@pika/web brings that nostalgic, 2014 simplicity to 2019 web development:

  • Simple ???? No bundlers required. Load modern packages natively in the browser.
  • Flexible ????‍♂️ Handles dependency trees of any size, even ones that includes legacy Common.js packages.
  • HTTP/2 Optimized ⚡️ No more huge JS bundles. Browsers only download dependencies when they change.

@pika/web installs dependencies to a new web_modules/ directory. If your dependency exports an ES “module” entrypoint in its package.json manifest, it is supported. Even if it internally depends on legacy Common.js dependencies, @pika/web should be able to handle it.

With zero configuration, @pika/web installs each dependency as a single file that runs natively in the browser. Bundling packages on a per-module basis makes it easy to build a web application that runs fast and caches well. Updating a single dependency won’t force a complete re-download of your web application. More on performance below.

┻┳|
┳┻| _
┻┳| •.•) ???? “Tip: Use pikapkg.com to find modern, web-ready packages on npm :)”
┳┻|⊂ノ
┻┳|

Quickstart

npm install --save-dev @pika/web
yarn add --dev @pika/web
# 1. Run @pika/web in your project:
$ npx @pika/web

# 2. Replace all NPM package imports in your web app with web-native URLs:
- import { createElement, Component } from "preact";
- import htm from "htm";
+ import { createElement, Component } from "/web_modules/preact.js";
+ import htm from "/web_modules/htm.js";

# 3. Run that file directly in the browser and see the magic!  
✨ ~(‾▿‾~)(~‾▿‾)~ ✨

# (Optional) If you already use Babel to build your application, skip "Step 2" and let our plugin rewrite your imports automatically:
echo '{"plugins": [["@pika/web/assets/babel-plugin.js"]]}' > .babelrc

# (Optional) Add a package.json "prepare" script to run @pika/web on every npm install:
{"scripts": {"prepare": "pika-web"}}

Examples? We got ’em

Performance

When @pika/web installs your dependencies, it bundles each package into a single ESM JavaScript file. Shared chunks are created for any shared, existing transitive dependencies. Example: If @pika/web installs 10 npm packages into web_modules/, you can expect 10 JavaScript files and maybe a few additional shared chunks.

Max Jung’s post on “The Right Way to Bundle Your Assets for Faster Sites over HTTP/2” is the best study on HTTP/2 performance & bundling we could find online. @pika/web’s installation most closely matches the study’s moderate, “50 file” bundling strategy. Jung’s post found that for HTTP/2, “differences among concatenation levels below 1000 [small files] (50, 6 or 1) were negligible.”

More testing is needed, but at this early stage we feel confident extrapolating the following: When served with HTTP/2, @pika/web installations perform better in production than single “vendor” JavaScript bundles and most custom dependency bundling strategies due to the comparable load performance and efficient cache usage.

Browser Support

@pika/web installs ES Module (ESM) dependencies from npm, which run wherever ESM syntax is supported. This includes all modern browsers (Firefox, Chrome, Edge, Safari) going back at least a year, but not IE11 or UC Browser for Android.

Options

package.json Options

Note: All package.json options are scoped under the "@pika/web" property.

  • "webDependencies": You can define an optional whitelist of “webDependencies” in your package.json manifest. This is useful if your entire “dependencies” object is too large or contains unrelated, server-only packages that may break @pika/web.
  "dependencies": {
    "htm": "^1.0.0",
    "preact": "^8.0.0",
    /* A mix of other server and frontend dependencies */
  },
  "@pika/web": {"webDependencies": ["htm", "preact"]},

CLI Options

  • --dest: Specify destination directory (default: web_modules/).
  • --clean: Clear out the destination directory before install.
  • --optimize: Minify installed dependencies.
  • --strict: Only install pure ESM dependency trees. Great for purists, or anyone who doesn’t want to deal with transitive Common.js and Node.js-only dependencies.

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.