How to create a NPM package in 2020 (simple & quick guide)

So you’ve finally decided to create that npm package you’ve been wanting for so long, lucky you!

The whole process might seem daunting, but there’s nothing to be fearful of, let’s quickly jump right in, shall we?!

In this tutorial we will create a very basic npm package that will allow you to push your code to the developer community.

Table of contents:

  1. What you need
  2. Step by step guide
    1. Preparations
    2. Create project files
    3. Add your code
    4. Commit and push
  3. Conclusion

Ingredients

Now you should make sure, you’ve got everything ready to proceed with this tutorial.

A NPM package requires just a package.json file with a name and a version keys, however if we want to create a valuable npm package out of our code, we need a bit of more work.

Here’s what you need:

  • command line (terminal on mac or any other bash terminal on windows)
  • git installed (hopefully you’ve got this)
  • npm installed (hopefully you’ve got this)
  • npmjs.org account (make sure you verify your email)
  • github.com account
  • a piece of code prepared to be placed into a library

Step by step guide

1. Brainstorm a name

A name of the package is important, because it will be shown everywhere and people will judge a purpose and usefulness of your package mainly via its name

2. Initialise project files

Create a folder with the name you brainstormed earlier and initialise a npm project files.

mkdir my-npm-package
cd my-npm-package
npm init

The last step npm init will ask you a bunch of questions that you can ignore, we will change all of the information right away.

Now open up a directory my-npm-package with your favourite editor and we will make some changes.

Open a file package.json and change the key name to the name of your package and a key description to a simple “one-sentencer”, that will describe, what the package does.

3. Prepare your code

Create a file index.js in the root directory of the project.

This file will contain the code that will be shipped with your package. Also. bear in mind this code will not be transpiled or processed when people will include it in their projects, so make sure your code does not contain any jsx or similar statements that needs to be transpilled.

For the sake of this tutorial, we will be creating a package exporting a simple multiplication function.

Now place the following piece of code into the index.js file your created above.

//this is required piece of code for the library
"use strict";

//this is required piece of code for the library
Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.default = void 0;

//this is your function
var multiply = function (a, b) {
    return a * b;
};

//this is required piece of code for the library
exports.default = multiply;

And if you ask how you will be using this code, you will be importing the code in your project this way:

import multiplyNumbers from 'my-package-name';

//for example
const result = multiplyNumbers(5, 5);

You can include in your package any code you want, for example jsx, react, typescript…etc, you just need to transpile it with babel or similar processor.

It can be easily accomplished and integrated into a new or an existing package. Checkout a tutorial How to transform ES6 to ES5 in your NPM package.

4. Commit & Publish

Now we’ve got everything ready for the last step. And it’s actually putting our code out there.

First we will log in into your npm account through command line.

If you’re already logged in, you can skip this part of this step.

To login in into your npm account go to your terminal and type:

npm login

It will ask you for your npm email and password.

You should receive a similar message:

Logged in as Ivan Hanak to scope @ivanhanak_com on https://registry.npmjs.org/.

Now it’s time to commit our code into the git repository:

git init

git add .

git commit -m "Initial release"

git push

By this step is our code already pushed and waiting to be pushed into npmjs registry. We’ll do it with the following command.

If you are not making a private repository, make sure to include access=public argument. (if you’re on a free version of npmjs account, you can create only public packages and will need to include this argument)

npm publish --access=public

For any of the subsequent attempts to publish your npm package, for example after an update, you needn’t to include --access parameter.

Hooray!

And that’s it! 🥳 Your first npm package is live. Now’s the time to polish it and put up some more information, so as your package can be found and used by other coders. And exactly that you will find out in the next article on What information should be included in the README of a NPM package?