Create Professional Library in NPM Package
Hello guys, Today I will write a tutorial how to create a professional library and make your library published in NPM Package. I know there is a lot similar tutorial like this, but I will make this tutorial more systematic and more explanation to help you understand more easier.
In this tutorial, Assume that you are will be create a library name
text-obfuscator is just a simple library to obfuscate the text.
- Visual Studio Code
We will going to use Visual Studio Code, but actualy you are able to use any IDE to code. I use Visual Studio Code because this is the top popular editor in the world. Visual Studio Code is Free, you can download it from here and follow the step to install it.
Git is the version control software to help you manage your repository of your project in Github. Git is an open source project so you are free to download it from here and follow the step from it website to install it.
Before we start to create a library. You have to register on 4 resources, it is:
Visit to Github and register your account in there. After you are finished to register, then you have to create your first repository. For example if your username is
aalfiann, then if your repository name is
text-obfuscator so your full link to your repository is
To clone your repository, you just go visit to
https://github.com/aalfiann/text-obfuscator then on the top-right there is green button name
Clone or Download, just click on it then copy the url from textbox, so your git link is
After you have the git link, now open your Visual Studio Code, then press
CTRL+SHIFT+P, paste the git link, wait for a second then you will get popup message to Open this Repository, just click it. Now you will open the project which is has been already connected with your repository on Github.
Now just minimize your Visual Studio Code and go for the next step below.
Visit to Travis then make a registration first in there. After register is done, now go to Settings. Then on top-left you will see the green button name
Sync Account, just click it. Wait for a second, after sync progress is done, now you will see your repository name is appearing on the right box. Okay, that is enough for now, we will continue this later to trigger the build test after the source code is uploaded on github.
Visit to Coveralls then make a registration first in there. After register is done, now go to Add New Repo. Then on top-right you will see button name
Sync Repo, just click on it. Wait for a second, then your repository name will be appear in there. You will see gray button
OFF, then click it to make coveralls listen to your repository in realtime to detect whats changes from your repository in Github.
Visit to NPMJS to create your account. You have to register to NPM website because this is required to publish your package library in NPM. After you are successfully register, just leave it, you can logout because later we will login to NPM through command from Terminal.
After you follow all the steps above, now we go back to open your minimized Visual Studio Code. You will see that your project is still empty. So follow the next step below to making your first library.
The first thing to do is you have to open the terminal from Visual Studio Code, then run command below
$ npm init
Then follow all the steps, for the test part just enter it, so you have no script test as for now. We will configure it later in the next step.
I have write the full article about create unit test at here. Just follow all steps from it. Once it done, you can go for next step below.
Structure can be anything, but for a standard which is many people use is like this:
src/directory is your source code library.
test/directory is your unit test file.
Now create new file name
Just paste this code and saved it.
Now you have already the source code of your library.
Now create a file name
Just paste with this code.
const assert = require('assert');
Now assume that you already have the unit test file.
To run your unit test, just run this command into terminal.
Now you will get the result like this.
You will see that there uncovered line with yellow color, it means that you have test it line but it was still for one condition, there is still another conditions which is are not tested yet. Unfortunately it can not be tested because it must be tested on browser. Ah I forgot to tell you that the
text-obfuscator is could be run in NodeJS or Browser. Because on the last line there is condition for
window which is it must be tested on browser, so that is why unit test is missed for one line.
README is the file that you should give the information detail about the project. For this example you can just paste with this below:
- You can see that you could put the badge into README.md file.
After everything is done, now you can go push your source code into Github by this command.
git add .
After your source code is successfully uploaded into github, now go visit to Travis-Settings. Then click on your repository name, then on the top-right there is button name
More options just click on it. Then the dropdown will apearing and there is
Trigger build menu, so just click on it.
Now the build test will be running for a minute, just wait for it. Once it done, you can go for the next step below.
When build is passed, you can just publish it into NPM Package by this command.
$ npm login
Yeah that is done, now your package you can view it on
Sorry there is no much image for the step, because trust me the register for an account is very simple even for a newbie.
Also the study case is a real library which was created for professional use. Actually I was use this
text-obfuscator library for many important projects.
For more detail you can check the source code is available on https://github.com/aalfiann/text-obfuscator.
Hope you are able to create your own library and publish it on your NPM Package. Feel free to ask if you are have problem or miss understanding about this tutorial.