This post is originally written here with all the code snippets as well -> https://easyontheweb.com/how-to-build-an-npm-package/
If you are a Javascript developer like me or have worked in the Node ecosystem ever then you must have heard of a very helpful package manager called NPM (node package manager). In this article we’ll be learning how you can build your own NPM package and publish it for others to use as well.
As one of my seniors at work usually says and I myself agree with the statement as well that the node ecosystem and the community is what makes it so popular. We have got libraries for nearly anything you can think of and that is why the open source community surrounding node is so great. You can just choose a library of your liking and start hacking away without having to as programmers say “Re-invent the wheel”.
Now, the module we’ll be developing in this article won’t be something that will change the world and make you a global superstar in open-source community but well as it will have the lamest logic possible but what this would just enable you to do is just create your first package and let it out into the world. The business logic really does not matter in this article because that is not the point of it at all.
The point of this article is to write our first module and publish it. Later, you may come up with an earth-shattering library in your own time and then become global superstar, I’ll just tell you how to do that on the smallest of scales.
What is NPM ?
As the node official docs say, NPM actually is two things – firstly it is an online repository for the publishing of open-source node projects and secondly it is command line tool we can use for package installations and version management.
The official site for npm is https://www.npmjs.com/ and I highly recommend you check it out, it is super cool.
You must have figured out what we would be doing right, as I said that NPM is an online repository for the publishing of open source projects. So, our aim in this article would be to create a module that we will then publish on this repository and other users can well, check our package out on the npm website and use the node package manager CLI tool to then download and use our package in their application.
Pre-requisites
One of the pre-requisites for publishing your own package actually is to have a developer account on NPM. So, just go to the link https://www.npmjs.com/ and sign up for an account over there.
Once you have signed up on the website the next thing you need to do is login to your npm account on your terminal using the command line command of npm login . Login using your credentials and now your terminal knows who you are with respect to the npm ecosystem and the package that you’ll be publishing will itself be linked to your npm account.
Another thing you need to do is create a github repository for your npm package, so just log into your Github account and create a repo for the npm package that we are going to build so that it’s code can stay in Github.
I really hope you do know how to do it because if not, I think it’s just a little early for you to be learning about publishing your own packages. Anyways, if you do not know how to do it and still want to publish your package go ahead and google on how to create a new Github repository as we’ll be keeping our package’s code over there.
The readme and the package.json
If you want your package to be taken seriously at all (ours won’t be taken seriously at all) – you should probably add a README.md file to your project. This is the file that will be shown on your git repo page and is which will often contain details on how to install your package and how to use your package.
I cannot put any more emphasis on this but it is absolutely vital to have great documentation for your package if you really want it to be used by many many people. I personally hate libraries and packages which are not documented well enough, no matter how good they are.
So, just create a README.md and add all the information about your package into that file.
Another file that you need to create for your package to be published onto NPM is the package.json file. So go ahead and create it using the npm init command that basically just creates this package.json file for you.
When you enter the npm init command you’ll be asked for a lot of things like the package name, the version and all so you need to fill these in carefully and not mess them up (even though most of them are pre-filled for you). The version is super important so make sure you always publish the right version for your package.
Our module
So far we have a README.md and a package.json file in our directory. Next we create the index.js file which is set as the default main file in the package.json (or any name you named in the package.json ‘s main property).
For our main file we will be writing a great module called nonsense-mod which will just change the text of any HTML node with a class of ‘nonsense’ to nonsense by default or to any word you pass in as a parameter.
With this last change we are ready to publish our package onto the NPM repository and for the world to make their text nonsense.
To do that, we just have to run a simple command npm publish from the root of your directory.
You’ll soon see a success message and if you now go to the NPM website or try searching for your NPM package via the CLI command you’ll be able to see the nonsense package !
Using the package we created
To use our newly created world beating package called nonsense mod we’ll need to create an html file with the following content :-
index.html
Note that we are importing a Javascript file called index.js so let us also create that file where we’ll be then using our nonsense-mod ‘s code and change everything to very nonsense.
index.js
Don’t forget to run the npm i nonsense-mod command in your project directory for you to be the first of many million people to download the nonsense-mod package. Once downloaded, you’ll need to use some sort of a bundler in order to leverage the benefits of the import statement so let us use one called ‘Parcel’ (please npm install it globally if you don’t have it).
Once downloaded run the command parcel index.html and check out your application on the port specified by parcel and be amazed at the great work your package is doing by converting the text to “very nonsense”.
Again, the most important thing right now isn’t the logic or the package you created but the very fact that you did create your first package and now you do know how you can create packages on your own that you can maybe use in various different projects of your own or be helpful to others. I hope you did understand how you can create an NPM package in this article and it would be great if you share it with your friends.
Do checkout my other node articles here where you might find some interesting stuff -> https://easyontheweb.com/category/node/
Top comments (0)