Build your JavaScript code to a public library on NPM

In this guide, we will show how we can transpile our JavaScript project into a library that we can publish to npmjs.com and expose to the world. We will show how to set everything up, from babel to package.json and also make it support TypeScript. Enjoy!

Set up our project

Start with create a new project and initialize it

mkdir my-library
cd my-library
npm init

Then, we will create a src directory and a file called Calculator.js with following code

export const multiplyNumbers = (a, b) => a * b;
export const addNumbers = (a, b) => a + b;
export const substractNumbers = (a, b) => a - b;
export const divideNumbers = (a, b) => a / b;

Set up babel

In order to make our code compatible with all JavaScript environments, we need to transpile the code. And we will use babel for this.

We start with downloading our dev dependencies

npm i --save-dev babel-core @babel/preset-env

And then we create our .babelrc in the root of the project with following config

{
  "presets": ["@babel/preset-env"]
}

Then we will create a build script in our package.json to build our code in src directory and output it to lib dir.

  "scripts": {
    "build": "babel src -d lib"
  },

Build our project

Let's build our new project using npm run build command.

npm run build

And now you should get a folder generated called lib with our Calculator.js inside that has the transpiled code.

Configure our package.json

Before we publish our library, we need to do some changes in package.json as well.

First, we specify our main file.

"main": "lib/Calculator.js",

And then, we need to give it a unique name. Go in and check at npmjs.com that your name is not taken.

"name": "my-project",

You should probably add a homepage, author and some keywords as well.

.npmignore

In order to not publish code and dev related things to npmjs, we should create a .npmignore file in our root as well to specify what we want npm to ignore when publishing. In our case, we don't need to publish our src directory since we have all the code we need in our lib dir. And .babelrc is not needed either since that is our dev dependency.

src/
.babelrc

Add README.md

Add a README.md file in the root and explain how to use the project so people understand why and how they should use the project.

Publish

When we are all set and done, we will authenticate to npm with our account, and then publish.

In the terminal, run these commands

npm login
npm publish

Patch

If you find issues or update something, we can patch the version using

npm version patch
npm publish

And npm will increment the version number for you.

NOTE: that if you change the code, you need to run

npm run build

for the new changes to take effect!

Test the library

If you want to test the library before publishing, we can do so to by doing a npm install by using the path from another project.

Navigate to another project and install it like

npm i /User/your-path/my-project

And then it should look like

"my-project": "file:../my-project",

In your other projects package.json.

And then consume it like this:

import { multiplyNumbers } from "my-project";
console.log(multiplyNumbers(2, 6)); // 12

Type the library

To support TypeScript, we can add some types as well. Create an index.d.ts file in the root of your library and add following types to it

declare module "my-project" {
  export const multiplyNumbers = (a: number, b: number) => number;
  export const addNumbers = (a: number, b: number) => number;
  export const substractNumbers = (a: number, b: number) => number;
  export const divideNumbers = (a: number, b: number) => number;
}

And point to it using types in package.json

"types": "index.d.ts",

And now the types will be recognized if the library is used in a TypeScript application.

Outro

That's it for this tutorial, on how to create a JS library and publish to npmjs.com. I hope you enjoyed this guide and that it helped you with creating an awesome library. If you have something published, please reach out and tell me about it :) Contact info is found here.