Publishing an npm package

There comes a time when you need an npm package that doesnʼt exist — or just want to share something with the world. In my case, itʼs a Typography.js theme. Iʼll use yarn as this is my favourite package manager, but npm can be used in a similar fashion.

Creating a module

This part is quite simple. yarn init and answer all the questions.

Using npm packages locally

We should also test the package locally while developing and before publishing it to npm. This can be done by locally linking it — basically, we are letting our local yarn or npm know that this package exists, and where it lives. We also need a test project where we import it from — Iʼm using a Gatsby blog starter, because it already uses Typography.js by default.

To link the package:

cd path/to/package-name
yarn link
cd path/to/test-project
yarn link package-name

Thatʼs it, now we can develop away.

Production build (spoiler: using Babel)

For the sake of performance and compatibility, we should minify and compile our code to be ES5-compatible. The easiest way to do it is using Babel.

yarn add --dev @babel/cli @babel/core @babel/preset-env babel-preset-minify

Now, we can add a build script to package.json:
"build": "babel src -d dist"

Letʼs not forget to point our package entry to this dist folder (it can be called something else of course):
"main": "./dist/index.js"

Ready to publish?

First, we have to register on npm. At least I have to, because this is my first package published there. This is conveniently done from the command line with npm adduser, which asks for a username, password and public email. Then a simple email verification, and the magic command:

npm publish

Thatʼs it!


By the way, check out my Typography.js theme on npm.js, and feel free to use it in your projects.