DEV Community

Fakorede Damilola
Fakorede Damilola

Posted on • Updated on

Publishing a package on NPM

One of the things that makes a web developer's job interesting is the fact that a random person can just type a word on google and your website pops up. But it gets better, You can have someone use your work in their code.

I recently learnt how to publish packages on NPM for other people to use and I want to explain how you can too. But first, I want to talk about PACKAGES and MODULES in node because this two things really confused me and I hope it can help someone out there get clarity.

PACKAGE

From the node JS docs, A package is a file or directory that is described by a package.json file. Basically, a package is a piece of code that you write and has a package.json file to describe it. So, this file below is a package why?? because of the fact that it has a package.json file with it

//index.js file
function checkNumber(val){
if(val%2===0){
return "is Even"
}else{
return "is Odd"
}
}

//package.json file
{
  "name": "check_number",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Fako",
  "license": "MIT"
}
Enter fullscreen mode Exit fullscreen mode

As you can see from the code above the package.json file is simply a file that describes another file in this case the index.js file. You can create a package.json file by typing npm init in your terminal and answer the questions. Any answer that you don't like can easily be replaced by typing it right beside that question.

Modules

Also from the node JS docs, A module is any file or directory in the node_modules directory that can be loaded by the Node.js require() function.
But to be loaded by the Node.js require() function, a module must be one of the following

  • A folder with a package.json file containing a "main" field.
  • A folder with an index.js file in it.
  • A JavaScript file. Note that modules are not required to have a package.json file. I.e not all modules are packages (only those that have a package.json file) but all packages are modules.

Now let's create a package.

Description

This is a package which will take in an array of numbers and return the average of those numbers. Sounds funny right, but that is packages. Simply your reusable code that you make available for everyone.
Note: you will need node JS and NPM installed on your system.
Start with creating a new folder, I will name mine avgNumber inside it create a file index.js. This has to be named specifically that because

  1. This is the convention
  2. That is the first place your system will look at when you try to use this folder/package anywhere. Remember that was what we described in the package.json file above
"main": "index.js"
Enter fullscreen mode Exit fullscreen mode

although you can change this, but I would strongly advice against that.
In your index.js file, this is the code you need

let sum = 0,
  avg;
module.exports = function avgNumber(arr) {
  for (let i = 0; i < arr.length; i++) {
    sum += arr[i];
  }
  avg = sum / arr.length;
  return avg;
};
Enter fullscreen mode Exit fullscreen mode

Here we are simply exporting a function that takes in an array of numbers and returns the average.
We can try what we have now, outside this avgNumber folder, create a new file main.js. I am creating the file outside the folder because I want to keep my package contained. Just my package and nothing else.
Now in main.js

const avg = require("./avg_number");
console.log(avg([1, 2, 3, 4, 5]));
Enter fullscreen mode Exit fullscreen mode

Since it is not yet an official 'npm package', I have to require it like I would require a folder. Notice the way I am not going ./avg_number/index.js, that is because JS by default already knows to look for an index file inside avg_number folder.
And from here, open up your terminal and type

node main.js
Enter fullscreen mode Exit fullscreen mode

and voila it runs....... I hope :):).
So now let publish the package for the whole world to see you are an awesome developer.

  • Create an account with npmjs.org
  • In your root directory terminal, run npm login and fill in the required details
  • From your terminal, cd into avgNumber with cd avgNumber.
  • Create a package.json file from your terminal with npm init. Note, Like every other product around the world, the name of your product must be special and this is no difference. The name written in your package.json file is what other people will use to install your package so you have to look for a catchy and fine name. I am not a name wizard like cisco (from flash) so I will just tag my name with the package. That adds a nice ring to it.
package name: (package) fako_average
Enter fullscreen mode Exit fullscreen mode

Note that by default the package name is the name of your root directory.
Press enter to see the other options and change them based on what you want.

  • Now run
npm publish
Enter fullscreen mode Exit fullscreen mode

Your package is now available for download from anywhere around the world.
Note that running npm publish will extract every file or folder from the directory you are running it and publish. So make sure you run npm publish inside the folder you want to make available.
Now, try to install it npm i fako_average, and you will immediately get a node modules which should contain your package and now you can go back to the main.js file and remove the ./ and note that you will have to change the name too what is written in your package.json file dependencies and run it again.

Before I end this session, I quickly want to add the fact that when you download packages like express etc, you tend to get a lot of other folders in your node_modules. This is because express itself depends on this other folders/modules to work and so installing express will install them also. But note that when you check your package.json, the dependency part, you will only see express meaning others are just modules (from our definition above).

Thank you for reading. You can follow me on twitter @fakoredeDami.

Discussion (0)