How To Create And Publish npm Package

Introduction

In this article, we will learn about easy steps for creating and publishing your javascript or node js utility to npm package repository.

How did I get the idea for creating and publishing of npm packages?

Actually, I was working on creating a dashboard with charts. As most library charts have their own convention for passing data to generate charts e.g. tui-charts, highcharts etc., while preparing data I had to rename some keys as per the required convention.

 

I have to rename multiple keys from an array of an object. In C# or Dot Net, you have probably heard about the term "DTO - Data Transfer Object" or Automapper which provides this functionality in which it converts one class to another class type with required fields.

 

Here, I have searched for javascript and JSON utility library using underscore js and lodash as well, but I didn't find any solution,  so I created a utility function and published it on npm. So I can utilize this in my different projects and as it is on npm it can be useful to other developers as well.

 

Prerequisite

• Nodejs and npm must be installed on System
• A user must have a GitHub account on which he can store source code.
• A user must have an account on npmjs

Step 1 - Create node module using npm init command

 

If you are using Windows system then you can open a command prompt with appropriate rights, or if you are a Linux user then you can open a terminal and run npm init command, 

npm init

When you hit the above command it will prompt some required and optional information regarding packages as per the below screenshot.

Note
Make sure your package name is unique in npm.js and it is available on npm.

 

 

 

Using npm init command one "package.json file" is created in a project folder.

Take a look at my package.json file for reference purposes,

{
    "name": "dto-utils",
    "version": "0.0.1",
    "description": "Inspired from Dot Net Data Transfer Object Concept, Utility contains method which rename keys in existing object using plain Javascript code.",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": ["dto", "rename keys", "json", "utility", "utils", "transform object"],
    "author": "anomepani",
    "license": "ISC"
}

Step 2 - Open current directory in any text editor and add entry point file index.js.

  

I am using Visual Studio Code as the text editor.  To open a project or current project directory in vs code, type the below command or you can just right click on a folder and open in your favorite IDE or Text Editor.

code .

Now create an index.js file which is an entry for any npm package and add your utility method or code to an index.js file.

Take a look at my utility method or index.js file. 

function DTO() {
    var dto = {};
    var isAllowKeyOverWrite = true;
    /**
     * function accept array of object and based on new key it update returning array of object with updated keys
     * @param {*} collection   Array of object
     * @param {*}   newKeyPair New key pair for old and new key
     * @param {*} overwrite Allow overwrite existing key or not
     */
    dto.mapTo = function (collection, newKeyPair, overwrite) {
        //TODO  Early exit check for invalid user input
        isAllowKeyOverWrite = overwrite !== undefined ? overwrite : isAllowKeyOverWrite;
        return collection.map(function (record) {
            // Clone new object to prevent modification of source object
            var item = Object.assign({}, record);
            for (var key in item) {
                // Restrict key as undefined while dynamic rename/inject new key in object
                // Restrict overwrite for existing key.

                if (newKeyPair[key]) {

                    var isKeyExist = newKeyPair[key] in item;
                    if (!isKeyExist) {
                        // If new key is not exist then not need to check isAllowKeyOverWrite flag
                        //Check new key is already exist or not
                        item[newKeyPair[key]] = item[key];
                        //itm["" + newKeyPair[key]] = itm[key];

                        //Once you injected key delete old key from object.
                        delete item[key];
                    } else if (isKeyExist && isAllowKeyOverWrite) {

                        // If new key is exist ,also check isAllowKeyOverWrite flag
                        item[newKeyPair[key]] = item[key];
                        //TODO Need to verify and modify below code if required.
                        delete item[key];
                    }
                }
            }
            // Deletion of old key code moved in above for loop
            // if (isKeyOverWrite) {
            //     for (var oldKey in newKeyPair) {

            //         delete itm["" + oldKey];
            //     }
            // }
            return item;
        });
    };
    return dto;
}
module.exports = DTO();

Step 3 - Time to create README.md file for project and check into github.

 

You can create a README.md file on GitHub directory by using "Create new file" button as per screenshot and update content to it as well.

 

As per the screenshot I have created a readme file for my project and also checked in to GitHub repository.

 

 

Before publishing a package to NPM it's required to commit and push your local changes on GitHub.

 

Reference link

• https://help.github.com/articles/adding-an-existing-project-to-github-using-the-command-line/
• https://gist.github.com/mindplace/b4b094157d7a3be6afd2c96370d39fad
• https://gist.github.com/c0ldlimit/4089101
  

 

Step 4 - As your package or utility is ready it's now time to publish the package.

 

Note
For publishing package, package name should be available an you can test by https://npmjs.com/package/<package>.

 

Type the below command in your terminal or in a command prompt at project directory. Once you run the below command it prompts for username, password and email address as per the below screenshot.

npm adduser

 

 

Once you successfully log in into npm.js you can type the below command for a publishing package.

npm publish

 

That's it. Your package is now published at npmjs. 

• Github repo link: https://github.com/anomepani/dto-utils 
• Npm js package link: https://www.npmjs.com/package/dto-utils 

Hope you liked the article.

Conclusion

In this article, we have learned about how to create and publish your npm package with easy steps.