What is npm

As a web developer understanding the npm is really essential. Npm helps us while working on big and serious projects. In this article, you will learn everything about npm you need to know to work with it proficiently.

JAVASCRIPT

Anush Raheja

7/22/2023

When I will run the command "npm run start" npm will read the script section of my package.json file if the start-named command is defined so npm will run it if not so npm will give you an error that script is not defined.

You can define any command or script in the script section and can run that script with the command "npm run" and then the script name.

  • Semantic versioning in npm:

    Semantic versioning also known as "semver" is a versioning scheme or technique commonly used in software development, and web development, including package management systems like npm (Node Package Manager). It provides a way to install, update, publish, and manage app and package versions properly without breaking the code and app. Semantic versioning follows a three-part version number system "Major.Minor.Patch". If you see any npm package version it always contains three digits separated by a dot "." like "4.3.1" you will never see a package version which is containing two digits like "4.3" it always contains three digits. its first digit is called the major version, its second digit is called the minor version, and its third digit is called the patch version.

    Example:

I take an example of a chalk package that we are using from our previous topics let's check the version of the chalk package from the npm website then we will understand how this versioning works in npm.

  1. Understanding npm

  • What is npm?

    Npm stands for node package manager it is a default package manager for javascript. Npm is used to install, manage, and share packages or dependencies in your javascript or node.js project with others. Npm is the world's largest software registry where almost above than 8,00,000 packages are available and coders or programmers used those packages to make their work easy and fast.

  • Why do we need npm?

    We need npm to install, manage, and work with third-party packages or modules in our javascript or node.js project. Packages are also known as
    modules. Packages or modules are nothing but just pre-written code by someone else and we install and use that pre-written code in our project.

  • Why do we need third-party packages?

    We need third-party packages or modules because we can't write every single line of code from scratch because it takes a lot of time and effort. So we use third-party packages or modules or pre-written code in our project to make our work easy, and fast and to solve our particular problem and save our time of writing that complete code from scratch.

    There are over millions of packages or modules in the npm so which package do we need to install and use? it depends upon which kind of code you want or which kind of coding problem you want to solve according to that you need to install and use packages you do not need to use all packages in one project using only those packages which you need in your project.

    You can go to the Npm official website and can search and learn about any package which you want to install and use in your project and its absolutely free you can install and use any Npm package free of cost.

When you will go to the node.js official download page you will see two options LTS and Current you need to install the LTS version (Long term support version) of the node.js because it is mostly recommended for users it works properly without any error so just click on LTS and select your operating system and you're downloading will start.

When your setup has finished downloading click on the setup at first it will take some time to open so you need to give it some time after it will open. Just click on the next button again and again till it has not finished installation you do not need to make any changes in the setup just let it remain default settings and install the setup as you usually install software from the internet after the installation node.js will have successfully installed in your system.

To check whether node.js and npm have been installed on our system or not you need to open cmd and write two commands "node -v" and "npm -v" "-v" means version so if you are seeing the version of node.js and npm on your cmd so you have successfully installed node.js and npm in your system.

After successfully installing the node.js and npm now we will understand the basics of npm and understand how to work with npm.

  1. Getting started with npm

  • Initializing the project

    When we start a new javascript or node.js project and if we want to use third-party packages or modules in our project so we initialize our project with npm because it will track which dependencies or packages we have installed and their versions and more information and metadata about your project. Npm will create a "package.json" file in your folder. We will understand the package.json file later in detail.

    To initialize a new project open any CLI (command line interface) like cmd, or Powershell, or if you use vscode as your default code editor so you can also use the vscode terminal in your project folder and type "npm init" then hit enter and then it will ask you some questions about your project.

  1. package name: Write your project name here in my case my project name is npm and the value which is in square brackets is the default value so if you don't write any value so it will take the value inside square brackets as a default value.

  2. version: The version is the your project version so let it remains the default. We will discuss the npm version later in detail.

  3. description: The description of your project will go here just write a description about your project and what's your project about.

  4. entry point: The entry point is the name of the main file of your project in our case our main file is index.js just write the name of the main file of your project. Usually, when we work on a big project so we do not put our whole code in one file we create different files for different codes but there is always one file where we import all of our code from different files that file is our main file which starts our app and we run that file to run our code.

  5. test command: let it Remains the default.

  6. git repository: If you have any git repository so you can write it here if not so let it Remains the default.

  7. keyword: If you want to mention any keywords related to your project so you can write them here just write the keyword name and separate them by comma (,).

  8. author: Write the name of the author of the project.

  9. license: let it Remains the default.

If you do not want to answer these questions so you can write the command "npm init -y" "-y" means yes to all questions this command will set the default value of every question so you do not need to answer every question and you can change the value of those questions later through the package.json file.

After answering all questions about your project your project will have initialized and the package.json file will have been created in your project folder.

the package.json file will look like this and you can change all of this information later in the future.

  • Commands of npm:

    Now we will cover the commands of npm which will help us to install, manage, and work with npm packages or modules.

    Note: To run any command of npm you need to type "npm" and then command name like

    • npm run

    • npm install, etc

  1. Installing packages: You can install packages in two ways Locally and Globally.

    Local package: Local package or locally installing the package means that package or module will only work in that particular folder where you have installed that package in any other folder that package will not work then you have to install that package again for that particular folder.

    To install the package locally you need to type "npm install" and then the package name like

This command will install the chalk package locally in your project folder. You can install any package locally in your project folder with this command

you can also write the command "npm i chalk" instead of writing complete word install (i is a short form of install).

Global package: Global package or globally installing the package means that the package or module will install in your system globally and will work anywhere in any folder.

To install the package globally in your system you need to type "npm install -g" and then the package name like

This command will install the chalk package globally in your system and can be accessed in every project folder. You can install any package globally in your system with this command

you can also write the command "npm i -g chalk".

Now after installing any npm package in your project folder, two more files will be created automatically by npm.

  1. package-lock.json file

  2. node_modules folder

node_modules folder: In the node_modules folder, all of your packages files are stored in our case we have installed the chalk package so the npm will install all the files of the chalk package in our project folder and store all of those files in the node_modules folder

Here you can see inside the node_modules folder the chalk-named folder has been created and in that folder, all of the chalk files has stored

Till here we have just installed one package that's why this folder is looking too small when you will install more packages this node_modules folder will become too big and large in size depending upon how many packages you have installed and what is the size of those packages.

package-lock.json file: We will discuss this file later in detail.

and now if you see your package.json file the chalk package and its version has been added to your dependencies section.

As you will be installing the packages those packages will add to your package.json file

  1. Updating packages: To update any npm package just type the command "npm update" and then the package name. Npm will automatically update that package in your project folder like

This command will update the chalk package in our project folder locally.

If you have installed any global package and you want to update that package you need to type the command "npm update -g" and then the package name. Npm will automatically update that package globally like

This command will update the chalk package in our system globally.

  1. Deleting packages: To delete any npm package just type the command "npm uninstall" and then the package name. Npm will automatically delete that package in your project folder like

This command will delete the chalk package in our project folder locally.

If you have installed any global package and you want to delete that package globally you need to type the command "npm uninstall -g" and then the package name. Npm will automatically delete that package globally like

  1. List of installed packages in our project: To see how many and which packages we have installed in our project you need to type the command "npm ls" or "npm list" Both commands work the same this command will give you the list of installed npm packages in your project folder like

We have just installed one npm package chalk that's why it's showing us the list of only one package and its version.

  1. List of outdated packages in our project: To see how many and which packages are outdated and they need update in your project you need to type the command "npm outdated" this command will give you all the list of outdated npm packages in your project folder that need to update.

After running this command npm will read our package.json file and all packages will have installed in our project folder and all package files will save in the node_modules folder.

Furthermore, There is another command like the "npm install" The command is "npm update" which works same like "npm install" command the difference is "npm install" install all the packages and "npm update" update all the packages in your package.json file. By running this command you can update all your packages automatically which are listed in your package.json file. You do not need to update all your packages manually by writting the command "npm update" and then package name which we have discussed previously.

  1. Dependencies in the package.json file: Dependencies section in the package.json file shows the list of packages we have installed so any package you will install will add to the dependencies section. Dependencies mean which packages our project is dependent on and which package we are using.

    There are three types of dependencies in the package.json file.

    1. dependencies section

    2. devDependencies section

    3. optionalDependencies section

  1. Dependencies section: Dependencies section also known as regular dependencies shows the list of those packages which we use in our project on a regular basis our project is incomplete without those dependencies. To add any package in the dependencies section just run the command "npm i" and the package name which we have discussed in previous topics this command will add the package to the dependencies section.

    another way of adding packages in the dependencies section just run the command "npm i -s" "-s" means save before npm "5.0.0 version" We had to run this command to add packages in the dependencies section but after the 5.0.0 version it is not compulsory you can simply run the command "npm i" and package name npm will automatically add that package in the dependencies section.

    example:

    When I will run the command "npm install" or "npm install -s" and then the package name. My package will add to the dependencies section

My chalk package has been added to the dependencies section of the package.json file.

  1. devDependencies section: devDependencies section shows the list of those packages which we use in our project for just a development process or for just the development time period to save our time, code fast, and increase our productivity in the production while deploying our website or web app that package is not necessary. Our project can run perfectly without those dependencies or packages and because devDependencies are not necessary for production so that is not mean they are useless they help us in the development they help us to code faster and increase our productivity and save our time. To add any package in the devDependencies section just run the command "npm i -D" "D" must be capitalized and the package name. This command will add the package to the devDependencies section.

    example:

    When I will run the command "npm install -D" or "npm i -D" and then the package name. My package will add to the devDependencies section.

nodemon is the package that is used to restart our node.js app automatically when we make some changes in our code. We use this package only in the development process in production it does not need.

The nodemon package has been added to the devDependencies section of the package.json file.

  1. optionalDependencies section: optionalDependencies section shows the list of those packages which are not strongly required for the project to run they are just another option or another alternative. If you want to build a feature that is not too necessary in the web app but it is just an option. If to create that kind of feature you need a package so if that package is available is so its fine or if not so it does not matter our app will work properly. To add any package in the optionalDependencies section just run the command "npm i --save-optional" and the package name. This command will add the package to the optionalDependencies section.

    example:

    When I will run the command "npm install --save-optional" or "npm i --save-optional" and then the package name. My package will add to the optionalDependencies section.

canvas is the package that is used programmatically to generate images and graphics like a . If this package not too necassary in our project its just an option so we will add this package in the optionalDependencies section.

The canvas package has been added to the optionalDependencies section of the package.json file.

  1. script section in the package.json file: The script section in the package.json file is really helpful it allows you to define custom commands or scripts and you can run those commands or scripts later in your terminal or CLI by their names.

    1. Define custom command or script: To define custom commands or scripts in the script section of the package.json file you just need to type the name of your command and the command which you want to run.

      Example:

      I want to run the command "node index.js" through my script section of the package.json file. I will write the name of my command I can use any name for my command in my case I will use the name "start" for my command and then type the command like

When I will run the start-named script my "node index.js" command will be run. "node index.js" command is used to run the file. First, we write "node" and then the file name. In our case, the file name is index.js.

  1. Run the command or script: To run the custom-defined commands or scripts in the script section of the package.json file you just need to type the command "npm run" and then the command or script name which you defined in your script section.

    Example:

  • Example:

    if you want to add style and colors in terminal output text so you need to install the "Chalk" package which will help you with that problem.

    If you want to send emails with javascript or node.js so you need to install the "Nodemailer" package which will help you with that problem.

  • Install npm

    To install the npm in your system you need to install node.js first and npm will automatically install with it because npm is integrated with node.js and npm needs a node.js runtime environment npm is useless without node.js and when we work with npm so mostly we are working with the node.js project. To install node.js just click on the download node.js link it will redirect you to the node.js official download page.

As you can see in the above image the chalk package version is "5.3.0" It's a three-digit number separated by a dot "." as we discussed.

The first digit of the version which is "5" is the major version the second digit of the version which is "3" is the minor version and the last digit of the version which is "0" is the patch version. We increase each of these three numbers depending on which kind of update we have made and installed.

When the major version means the first digit of the version updates then minor and patch versions will be converted into 0 if the previous version was "5.3.0" and the major version got updated then the latest update will be "6.0.0" The major version has increased 5 to 6 and the minor and patch versions converted into 0. When the minor version means the second digit of the version updates then the patch version will be converted into 0 if the previous version was "6.0.0" and the minor version got updated then the latest update will be "6.1.0" The minor version has increased 0 to 1 and the patch version converted into 0. When the patch version means the last digit of the version updates then any number will not be converted into 0 just the patch version will be changed if the previous version was "6.1.0" and the patch version got updated then the latest version will be "6.1.1" The patch version will be increased 0 to 1.

Major version: The major version means that it's a big update This indicates incompatible changes with older code. It should be updated when there are major changes or when existing functionality is removed. Incrementing the MAJOR version often indicates that consumers of the package may need to modify their older code to work with the new version of the package otherwise their older code or app might be crashed.

Minor version: The minor version means that it's a new feature update This indicates compatible changes with older code. It should be updated when there are new features or enhancements in older code. Incrementing the MINOR version often indicates that consumers of the package can safely update to the new version and use new features of the package without modifying their old code.

Patch version: The patch version means that it's a bug fixes update This indicates compatible changes with older code. It should be updated when there are any bug fixes in the older code. Incrementing the PATCH version often indicates that consumers of the package can safely update to the new version without modifying their old code and there are no new features introduced just bug fixes and enhancements in the existing features of the package.

In addition to these three parts, semantic versioning allows for pre-release versions.

Pre-release versions: A pre-release version is denoted by appending a hyphen and an identifier after the version number. It is used to indicate that the package is in the development or testing phase. For example, "1.0.0-alpha" or "2.3.1-beta.2".

Now, let's see some examples of how semantic versioning works:

  1. Suppose you have a package called "my-package" with an initial version of 1.0.0. You make backward-compatible bug fixes, so you update the PATCH version: 1.0.1. Consumers can safely upgrade to this version without worrying about breaking changes.

  2. You add a new feature to "my-package." Since it's a backward-compatible change, you increment the MINOR version: 1.1.0. Consumers can upgrade to this version to access the new feature.

  3. You discover a critical bug in the previous version and fix it. This fix is backward-compatible, so you update the PATCH version: 1.1.1. Consumers can upgrade to this version to get the bug fix without worrying about breaking changes.

  4. You decide to rewrite the package from scratch, introducing breaking changes. In this case, you increment the MAJOR version: 2.0.0. Consumers who rely on the previous version may need to modify their code to work with this new version.

  5. While working on version 2.0.0, you release a pre-release version to gather feedback from early adopters. You can label it as 2.0.0-beta.1 to indicate that it's not yet stable.

  6. Finally, you release the stable version of 2.0.0. The pre-release tag is removed, and the version becomes 2.0.0.

Now furthermore when you install the npm package the first time npm installs the latest version of the package and with the time period you may want to update your package so while updating a package you have to make sure that you do not accidentally install the major version of the package but fortunately, npm has a safeguard for this problem. Npm gives you the power to safely install and update a Npm package without breaking your code or app.

If you notice on versions of packages you will see there is a caret " ^ " symbol with version and not only this there are more symbols which we are going to learn now.

  1. ^ (Caret): Specifies that the package can be installed with any compatible or latest version that has a higher MINOR or PATCH version only it will not install the major version. This symbol is the default when you install or update any package npm by default set this symbol for that package.

  2. ~ (Tilde): Specifies that the package can be installed with any compatible version that has a higher PATCH version only it will not install the major and minor versions.

  3. > (Greater Than): Specifies that the package must be installed with a version greater than the specified version.

  4. >= (Greater Than or Equal To): Specifies that the package must be installed with a version greater than or equal to the specified version.

  5. < (Less Than): Specifies that the package must be installed with a version less than the specified version.

  6. <= (Less Than or Equal To): Specifies that the package must be installed with a version less than or equal to the specified version.

  7. = (Equal): Specifies an exact version match.

  8. - (Hyphen): Specifies a range of versions. For example, "1.2.3 - 2.0.0" allows any version between 1.2.3 and 2.0.0 (inclusive).

  9. || (OR): Specifies multiple version ranges, allowing any version that satisfies at least one of the ranges. For example, "1.2.3 || >=3.0.0" allows any version that is either 1.2.3 or greater than or equal to 3.0.0.

Examples:

To install or update to any specific version of packages you can use the command "npm update" or "npm install" and then the package name with @ symbol then mention the version you want to install or update to like

If I want to update only the latest patch version of the chalk package I will write the command

if i want to update between any two versions of the package i will write the command

if I want to update the latest version of the package does not matter what the version is. You can mention directly the latest version of the package or you can write the "latest" keyword after @ sign npm will automatically find the latest version and update it.

You can check the latest version of any npm package on npm offical website by searching the package name

Both of the commands will install the latest version of chalk package.

Now we are going to understand the package.json and the package-lock.json file in detail understanding these two files is important because these files contain the data and information about your project and packages so we need to understand how these two files work and what are their uses of these files.

Note: We will learn and understand more npm commands in the upcoming topics.

  • Package.json file:

Now we will understand the package.json file.

  1. What is the package.json file: The package.json file contains the data and information about your project like your project name, your project version, etc, and about your packages and dependencies like which package you are using in your project and what is the version that package and more information about your project.

  2. Why we need the package.json file and its usage:

    1. Usage 1: We need the package.json file because we have to track the data about our project and project dependencies when you work on a big project you install too many packages and dependencies and you have to save data and information about your project so you can not remember every information about your project like how many and which packages you have installed and what are the versions of those packages and other information about your project. That's why we create the package.json file with the command "npm init" or "npm init -y" as we discussed in previous topics while starting our new javascript or node.js project to keep track of information about the project.

    1. Usage 2: if somebody wants to use those packages which you have used in your project so you can share the package.json file with that person to give him/her information about your project and packages or dependencies and you can share the package.json file with anyone without hesitation nobody can misuse that file or the data inside that file because package.json file only contains the basic and fundamental information about your project.

    2. Usage 3: package.json file helps you and other people who are working on your project to install and keep track and packages and dependencies so if somebody wants to use the same packages which you are using in your project you can share the package.json file with that person so he can use those all packages and he don not need to install all of those packages manually suppose if you have 12 packages in your project and anybody wants to use those packages so he does not need to install all 12 packages one by one he just needs that package.json file and he can install all packages at one with just one command. The command "npm install" or "npm i". What this command will do this command will read your package.json file in your folder and automatically install the packages in the folder automatically which are listed in the dependencies section of the package.json file.

      Note: We will discuss dependencies in the package.json file later in detail.

    3. Usage 4: When you share your source code with someone or push that source code on GitHub you do not share the node_modules folder because the folder contains all of the packages files and usually this folder is too big in size if we share node_modules folder so it takes a lot of time to share so what we just do we skip our node_modules folder and share our package.json file and if somebody wants to use all of those packages which we have used in our project so he can install all packages at once.

    Example:

    I have this package.json file and I want to install and use all of the packages which are in the file so I will just write the "npm install" command and all packages which are in the dependencies section of my package.json file will automatically install in my project folder

  1. Use an import syntax of javascript to import or use packages in your file. In node.js there are two types of syntax for import and export.

    1. CommonJS modules: Usually use in node.js and it's a default syntax for importing and exporting modules or packages in node.js.

    2. ECMAScript modules (ES modules): Usually use in front-end It's not a default syntax of node.js but you can use it in node.js. You just have to add ("type": "module") to your package.json file then you can use the ES module syntax in node.js.

    Both modules work the same just their syntax is different.

    I am not explaining the syntax of both modules because this is another topic our main focus is on understanding npm.

    You can use any of these modules' syntax to import the package in your file and then just use that package as you normally use functions or code in your project.

    Example: Let's import a chalk package in our file and use it.

    Note: After the chalk 5.0.0 version chalk doesn't support the CommonJS module syntax it only works with ES modules syntax if you want to use chalk with The CommonJS module then you need to use the chalk 4 version instead of the chalk 5 version. So for this example, I am using Chalk 4 version

    CommonJS module:

ES module:

  1. Getting started with npx

  2. What is npx:

The name "npx" stands for "Node Package Execute". Npx is a command-line utility that comes bundled with npm (Node Package Manager) version 5.2.0 and higher. It is a powerful and convenient tool used to execute Node.js packages and command-line utilities directly from the terminal, without the need for global and local installations. It usually uses for CLI tools and utilities or with those packages which work on CLI like cmd or terminal like "nodemon", "eslin", "prettier", etc.

  1. Difference between npm and npx:

The npm and npx are both command-line tools that come bundled with Node.js and are used for managing Node.js packages, but they serve different purposes.

Npm: npm is the default package manager for Node.js, and it is used primarily for installing, updating, and managing Node.js packages. You install the third-party packages locally or globally from the npm registry and use them in your projects.

Npx: npx is a tool introduced with npm version 5.2.0 and above. Its primary purpose is to execute Node.js packages without the need to install them globally or locally. Unlike npm, npx is not used for installing or managing packages in your project; instead, it is used for running one-time or infrequently used packages in your project without installing them.

  1. How npx works:

Usually while working with npm when we install the npm package and check whether is available or not in their npm registry if that package is available then npm installs that package locally or globally in our project and we use it. But in npx we do not install the packages locally or globally in our project when we run any CLI package or tool with npx npx checks whether that package is available or not in the npm registry if it is available then npx takes that package and installs that package temporary in our project and when that package finished its work then npx automatically delete that package and its all files completely from our project.

  1. How to use npx:

Npx comes along with npm version 5.2.0 or higher if you are this version or higher so you do not need to install npx but if your version is less than 5.2.0 so you can update your npm version so then you will get npx in your system to work with npx you need to type command "npx" and then package name and then command of that package which you want to run in your CLI.

Example: Let's take the example of nodemon nodemon is a CLI tool that restarts our code automatically after every change so if I want to run nodemon package without installing it I will write the command

  • Table of content

  1. Understanding npm

    1. What is npm

    2. Why do we need npm

    3. Why do we need third-party packages

    4. Install npm

  2. Getting started with npm

    1. Initializing the project

    2. Commands of npm

    3. How to use npm packages in the project

    4. Understanding package.json file

    5. Understanding semantic versioning in npm

    6. Understanding package-lock.json file

  3. Getting started with npx

    1. What is npx

    2. Difference between npm and npx

    3. How npx works

    4. How to use npx

  4. Publishing the package

    1. Initialize a new project

    2. Write your package code

    3. Test the package locally

    4. Understanding readme.md file

    5. Publish the package

    6. Update the package

    7. Delete the package

  5. Conclusion

In the above code, I have written first "npx" We are telling that we want to run npx command then we have written the name of the package which we want to run then the command of the package which we want to use. With this command, you can run any CLI tools or utilities, or packages with npx that you want to use. Remember that npx only works with those packages which work in CLI, not in your code or file

  • Package-lock.json file:

    The package-lock.json file was introduced in npm version 5 to solve some issues related to package dependency resolution and to ensure deterministic installs. The primary purpose of package-lock.json is to lock the specific versions of all installed packages and their dependencies. This means that every time you or someone else installs the project's dependencies, npm will ensure that the exact same versions of packages are installed across different environments and by different developers. This helps avoid version mismatches that could lead to bugs or inconsistencies.

    By fixing the package versions, package-lock.json enables deterministic installs. This means that no matter when or where the npm install is executed, the same set of dependencies will always be installed, resulting in predictable and consistent behavior across installations.

    The package-lock.json file includes a cryptographic hash (integrity field) for each installed package. These hashes help detect if any package has been tampered with or corrupted. If there are any inconsistencies, npm will refuse to install the package, ensuring the integrity of the installed packages.

    In short, package-lock.json is a vital tool for ensuring stable and reliable Node.js projects by offering version control for dependencies and facilitating reproducible installations across different development environments. You do not need to worry about maintaining the package-lock.json file npm automatically creates, and manages this file.

  1. Publish npm package

    Now we are going to learn how can we create, test, and publish our own npm package on the npm registry. Publishing your own package on npm looks like a different and a complicated task but its so easy by following these steps you will be able to create, test, publish, update your own npm package.

    1. Initialize a new project:

      First, you have to initialize a new npm project for your package and fill all important data in the package.json file related to your project as we discussed previously. In the "name" field write the name of your package in the package.json file and while deciding the name for your npm package make sure that your package name is not already taken use a unique name for your npm package.

  1. Write your package code:

    After initializing the project create an index.js file as your main file you can use any name for your file but its generally recommended to use "index" for your main file and write all of your package code into that file you can create different files and then import that code into the main file and if you need any third-party npm package for your package code you install it and use it in your project.

    I am creating a very basic package that will give you an OTP and for this, I am using an npm package called "otp-generator" so now i will install this package then we will work on our package.

Now let's write the package code to generate otp

I have written all my package code in my index.js file in the file I have imported my "otp-generator" package and otp named function is defined which will take a parameter and I am using that parameter in the "otpGen" npm package and then we are returning the gen function and at the end, I am exporting my "otp" named function.

This code is just, for example, your npm package code might be too large and might contain too many other files.

  1. Test the package:

    We have written the whole code of our package now it's time to test our package whether is it properly working or not. To test our package i will create another file named "test.js" In this file I will import and test my package.

We are testing our package by importing the code inside the "test.js" file and running the code. There are also many packages, libraries, frameworks to test your package locally in your system like "chai", "mocha", "jest", and etc. I am not explaining these packages because this is another topic.

After testing our package it's time to publish it on the npm registry.

  1. Understanding readme.md file:

    The readme.md file is an essential component of the package because it's the first thing that users see on your npm package page. The content of readme.md file will be present on your package page. Inside the readme.md file you write about your package, its installation, its usage, its features, and more. In short, in this file, you write all the instructions about the package which will be seen on your package page. This file type is markdown (MD). Markdown or MD is the lightweight markup language that formats plain text documents into HTML that will be visible on web pages. If you do not know markdown then do not worry learning markdown or MD is so easy you can learn complete markdown within 30 minutes or less with the help of youtube videos, google, and ChatGPT as well.

Now you have to update your package code after that you have to update your package version also from the package.json file. You have to update your package version according to your update if you have updated something big so you need to update the major version, or if you have just added a new feature so you have to update a minor version, or if you have just fixes the bug or improve something so you have to update your patch version. In my case, I have added a new function so it's a kind of new feature so I will update my minor version of the package.

Note: If you are updating your package code so is compulsory to update the package version also you cannot publish the package with the same version or an already published version you have to update the version if you want to publish the package again.

The package's previous version was "1.0.0" and now I have updated a minor version of the package so it is "1.1.0".

Now after updating your package code and package version, you need to run the command "npm publish" It will again publish your package with the updated code and version.

That's it, Your package has been updated you can do this again and again to update your package just update your package code and its version and again publish it.

  1. Delete the package:

    If you want to delete the specific version of the package so you can do this by the following command.

Replace "<package-name>" with your actual package name and "<package-version>" with your actual package version which you want to delete like

Make sure that you delete the package very carefully because deleting the particular version of the package may cause the app or code break of the package users.

Note: This command only works if you delete your package version within 72 hours. After the timeout, you will be not able to delete your package version. But there is a solution if you have passed 72 hours and now if you want to delete your particular package version so there is another command for this situation.

This command will not delete that package version but it will deprecate it means when somebody tries to install that deprecated version of the package npm will give him/her the warning that this package is deprecated do not use it so the person will understand this package is not useable so he will use another package version.

  • How to use the npm package in the project:

Now you have installed your required npm package in your project but how to use that package? To use the npm package you need to import that package in your project let's see how.

  1. Go to your main file and make sure that your main file name is matched with your entry point file name in your package.json file.

  1. Publish the package:

    before publishing the package on npm make sure you have created your account on npm and signed in into your account you can do it by going to the npm website then creating your account and signing in or you can do it by your CLI like cmd or terminal by just typing two commands.

    To create a new account on npm you have to write the command "npm adduser" Then it will ask you questions about your account fill in all the information and your account will be created.

    To sign in to your account on npm you have to write the command "npm login" Then it will ask you questions about your account fill in all the information and then you will log in to your account.

    After logging in to your account it's time to publish your package and it's very easy. Go to your package folder where all your package code is written and then you have to write the common "npm publish" and Done. Now your package is live on the npm registry you can check your package on npm by writing your package name. In my case, I have named my package "otp-alternate".

    You can check my package "otp-alternate" on npm by typing the package name or clicking on the link otp-alternate package this link will redirect you to my package page.

  2. Updating the package:

    Now you have successfully published your first npm package but you might want to update your package from time to time to improve and add new features in your package so let's see how to update your package and we will follow the semantic versioning rules to properly update our package and it's version.

    To update your package you just need to update your package code and update your package version according to which kind of update you are making and then again publish your package your new package version will be live on the npm registry.

    Example: I have defined one more function in my "index.js" file and I will update it. In your case, it can be any kind of update maybe some big update, or just a new feature update, or just a bug fixes update. So I am just giving an example of how can you update your package after publishing.

The all content or information you are seeing on the left side of the page in the above image this all content is visible because of the readme.md file. So you can assume how much important readme.md file is for our package.

To write all this content on your package page you need to create a "readme.md" file in your package folder make sure the file name must be same because npm recommends a "readme.md" name for your md file after creating the file write all content and information about your package which you want to display on your package page.

Example:

I have written all my content and information in the file which I want to show on my package page. Your all code will be display on your package page when you publish your package on npm

  1. Conclusion

    We have discussed everything about npm which you need to know as a web developer or to work with npm proficiently. I hope you found my article helpful if you have any doubt you can ask me by contacting me and if you loved my article so share it with others who need this article.

    Subscribe to my newsletter for more such blogs and follow me on social media to stay tuned. Thank you for reading my article.