Pika Brings Zero-Configuration Bundling and Publishing for NPM Packages

Pika revisits the discovery, bundling, packaging, and publishing of npm packages. Its discovery module exposes an online search interface retrieving exclusively ECMAScript module-based packages (ES Module or ESM) published on npm. Its configuration-free packaging module builds, bundles and packages applications optimized for consumption in modern browsers and Node.js environments.

Pika offers an online interface to ES modules-based npm packages (e.g. packages with a defined module entry in their package.json manifest). Developers may query Pika for such packages by name. Alternatively, they can restrict their browsing to popular packages.

@pika/pack presents itself as “npm package building, reimagined”. The pack module exposes a single command line interface (CLI) which handles common build, packaging and publishing operations through a sequence of pre-configured plugins. The module documentation mentions:

Plugins wrap already-popular tools like Babel and Rollup with npm-optimized config options, removing the need to fiddle with much (if any) configuration yourself. You even get a generated package.json manifest configured for you automatically.

@pika/pack will use the src/index.js file of the source directory it is targeting as an entry point. Execution must be configured in the package.json:

{
  "name": "simple-package",
  "version": "1.0.0",
  "@pika/pack": {
    "pipeline": [
      ["@pika/plugin-standard-pkg", {"exclude": ["__tests__/**/*"]}],
      ["@pika/plugin-build-node"],
      ["@pika/plugin-build-web"],
      ["@pika/plugin-build-types"]
    ]
  }
}

The @pika/plugin-standard-pkg plugin will currently build ES2018 distributions from a source project. The plugin updates yearly with the latest ECMAScript spec.

The @pika/plugin-build-node plugin will add a Node.js distribution to a pika-built package. That distribution follows the CommonJS (CJS) Module Syntax, and is transpiled to run on Node.js LTS. The plugin adds a main entry to the pika-generated package.json manifest. The main entry is used by convention to indicate the entry point for CommonJS distributions.

The @pika/plugin-build-web plugin adds an ESM distribution for a package, which is built and optimized to run in modern web browsers and is understood by most bundlers. The module adds a web distribution to the pika-built package and a module entry to the pika-built package.json manifest.

The @pika/plugin-build-types adds TypeScript type definitions to a package build.

In total, more than ten plugins complement the previously presented plugins and address miscellaneous use cases, such as targeting Deno.js or Web Assembly (WASM) builds. Deno.js is a secure V8 TypeScript runtime from the original Node.js creator. Web Assembly is a new assembly language that is a compilation target for a wide range of other languages such as C++, Java, C# and Rust.

Builds are obtained with pack build. The configured pack plugins create directories containing the produced distribution and update a separate pika-generated package.json. The previous example may for instance lead to the following generated package.json:

// After: your built "pkg/" package.json manifest:
{
  "name": "simple-package",
  "version": "1.0.0",
  // Multiple distributions, built & configured automatically:
  "esnext": "dist-src/index.js",
  "main": "dist-node/index.js",
  "module": "dist-web/index.js",
  "types": "dist-types/index.d.ts",
  // With sensible package defaults:
  "sideEffects": false,
  "files": ["dist-*/", "assets/", "bin/"]
}

Developers may publish their package with pack publish. This command features an interactive interface which walks a developer through the publishing process. The publishing process includes version bumping, release tagging, build generation, and the eventual package publishing.

@pika/pack may currently handle application sources written in JavaScript, BuckleScript (OCaml and ReasonML compiler), or TypeScript. Compilation currently targets JavaScript or Web Assembly (WASM). Examples of usage are available in a dedicated repository.

The Pika team contends Pika is a good choice for small- to medium-sized sites:

At a certain size, you will probably want to optimize your site for production by bundling your application source. But what we found was that the caching wins + the reduced complexity wins more than made up for the lack of bundling on small to medium sized sites.

Some developers enthusiastically welcomed Pika capabilities. Domantas explains:

Instead of trying to wire up everything myself I just used @pikapkg this time to bundle and publish my new package. If you are looking for something that just works I highly recommend trying it out too

Pika however remains a fairly new tool. It is in its early phase, bugs are still being ironed out, and its first major release remains pending.

The large majority of npm packages are published exclusively following the CommonJS specifications, which include Node’s native require() and module.exports syntax. Bundlers, such as Webpack or Rollup, have a hard time applying advanced optimizations such as tree-shaking to CommonJS packages. This may lead to larger files, resulting in longer time-to-interactive metrics. ESM thus allows for optimizations ultimately resulting in a better user experience. ESM is supported by all modern browsers.

As of February 28th 2019, around 50,000 (6%) npm packages are based on ES modules. Rollup kick-started the surge in adoption of ES modules by pioneering the use of the module entry point in their bundler in August, 2016.

Pika packages are available under the MIT open-source license. Contributions are welcome via the respective GitHub packages and should follow the respective contribution guidelines and code of conduct.