BBV logo

Part 3 - Making your Javascript library in less than five minutes with Pika 🐹

Manuel Tuero

29 April, 2020 - 2 min read

Motivation

Many of us may (or not) ever had to make a package publish to npm. In that case, you already know how much work goes into a modern build process:

  • Transpile JavaScript
  • Compile TypeScript
  • Convert ES Module syntax (ESM) to Common.js
  • Configure your package.json manifest

...and that's just the basics.

Not even mentioning if your package was optimized for web browsers and bundlers like Webpack or Rollup, or includes type definitions for VSCode & TypeScript users. All these require much knowledge, configuration, tooling, time, and effort to get done right.

So this is where @pika/pack comes to the rescue!

What is @pika/pack?

It's a tool that helps developers to build packages without having to make all the things that I mentioned above.

How does it work?

Pika works with the Package Build Pipeline concept, connecting pre-configured plugins to build and optimize your package. Plugins wrap popular tools like Babel and Rollup with options already optimized for npm. This lets build your package without requiring much configuration.

@pika/pack builds your entire package: code, assets, and even package.json manifest. After that, you end up with a fully-built pkg/ directory, ready to be published. Entry points like "main", "module", "umd:main", "types", "unpkg", and even advanced options like "sideEffects" and "files" are all handled by build plugins.

A real-world example: using Pika to build our UI-Components library

Some weeks ago, I started to create the UI components library for BlackBox Vision websites since we noticed there were lots of duplicated components that should be moved to a unique package and be used from there.

So, I needed to make a package for my library with module support for many types. Pika helped me with this task.

Getting started was really easy! Just followed these steps:

1) Install @pika/pack:

npm install -g @pika/pack

2) Add this line to package.json manifest:

"@pika/pack": {"pipeline": []},

3) Run @pika/pack:

pack build

This generated an empty package on the folder /pkg, nothing very useful by itself, but it turns very powerful after adding some of these official plugins.

I’ve chosen 4 of them:

package.json example

Now I would like to explain what plugins do and why I used.

Source Builder

@pika/plugin-standard-pkg: Compiles JavaScript/TypeScript to ES2020. Supports personalized, top-level .babelrc plugins/config.

Distribution Builders

@pika/plugin-build-node: Builds a distribution that runs on Node LTS.

@pika/plugin-build-web: Builds an ESM distribution optimized for browsers & bundlers.

@pika/plugin-build-types: Builds TypeScript definitions from your TS, or automatically generate them from your JS. Not required if you use @pika/plugin-ts-standard-pkg.

Publish the package

Once the library was finished, it was time to publish it on npm. For this, only run the pack publish command at your top-level project and @pika/pack will walk you through cutting a new version and publishing your package.

That’s all! Your library is ready to be used, "pika pika"! ϞϞ(๑⚈ ․̫ ⚈๑)∩

Thanks a lot for reading! Remember this post is part of “From Zero to Hero: Painless way of building a great Javascript library” series.
See you next time at: “Part 4 - Semantic commit... Can you imagine a world with standard commits?”

Manuel Tuero

I'm CTO and co-founder of BlackBox Vision. I consider myself a passionate and constant person who likes challenges and help other people.

Subscribe for latest updates

Sign Up for our newsletter and get notified when we publish new articles for free!

Maybe you could be interested to read