Skip to content
📦 Run npm dependencies directly in the browser. No Browserify, Webpack or import maps required.
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets respond to feedback, keep nested npm package name structure Mar 20, 2019
src add warning if no esm deps were found Jun 17, 2019
.gitignore initial commit Feb 25, 2019
.prettierrc finalize file path support Mar 9, 2019 Update May 2, 2019
LICENSE Create LICENSE Mar 1, 2019 Update Mar 20, 2019
package-lock.json 0.5.0-pre.3 Jun 17, 2019
package.json 0.5.0-pre.3 Jun 17, 2019
tsconfig.json update dependencies Jun 7, 2019


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


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 npm packages as single .js files 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 other npm packages (even legacy Common.js packages) @pika/web should be able to handle it.

Bundling packages on a per-module basis like this 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 to find modern, web-ready packages on npm :)"


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


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.


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 if you'd like to install dependencies by file path.
  "dependencies": { "htm": "^1.0.0", "preact": "^8.0.0", /* ... */ },
  "@pika/web": {
    "webDependencies": [
      "preact/hooks", // A package within a package
      "unistore/full/" // An ESM file within a package

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.


Pika's mission is to make modern JavaScript more accessible by making it easier to find, publish, install, and use modern packages on npm. You can learn more about the Pika project at

Special Thanks: Rollup

@pika/web is powered internally by Rollup. We believe that bundlers shouldn't be a requirement for modern web development, but none of this would be possible without the awesome work done by Rollup contributors. If you use and enjoy our software, consider contributing back to Rollup on Open Collective.

You can’t perform that action at this time.