Home >Web Front-end >JS Tutorial >How to publish a package to npm: a step-by-step guide
Publishing packages on NPM (Node package manager) is not only a way to share your work with other developers, but also to stand out in the development community. Imagine creating a reusable solution that can be integrated into various projects around the world, saving other programmers time and effort.
In this article, you will learn, step by step, how to configure, publish, and maintain your own package on NPM, making your contributions accessible and increasing your visibility as a developer.
Before you start, make sure you have:
Run the commands below in the terminal to verify that the installation of Node.js and NPM was successful.
node -v npm -v
If the installation is correct, the terminal will display the version of each.
The result will be similar to the one below:
$ v20.18.0 # node -v $ 10.8.2 # npm -v
Start by creating a folder with the name you want for the package. In my case I chose "string-reverser-jm".
mkdir string-reverser-jm # cria a pasta via terminal cd string-reverser-jm # acessa a pasta via terminal
Initialize NPM:
npm init
When executing the above command, the terminal will ask you a few questions to create the package.json file.
Below is an explanation of each item that we need to fill out.
If you finish the questions and NPM created the file without any of this information, open the created file in an editor and add whatever is missing.
Example:
{ "name": "string-reverser-jm", "version": "1.0.0", "description": "A simple utility to reverse strings, useful for demonstrations and small projects.", "main": "index.js", "scripts": { "test": "echo \"No test specified\" && exit 1" }, "author": "Juliana Macedo <contact@starcoders.info> (https://www.starcoders.info)", "keywords": [ "string", "reverse", "utility" ], "license": "MIT" }
Create the index.js file in the root of the project.
function reverseString(str) { if (typeof str !== "string") { throw new TypeError("Expected a string as input"); } return str.split("").reverse().join(""); } module.exports = reverseString;
To test the package before publishing it, we will use the npm link command
In the package directory, run the command:
npm link
In the project where you want to test the package, run the command:
node -v npm -v
Import and use the package in your test project to ensure it is working:
$ v20.18.0 # node -v $ 10.8.2 # npm -v
To remove the created links, simply run the command npm unlink string-reverser-jm in the test project directory and then npm unlink in the package directory.
First, create a Git repository for the package and link it to NPM. This increases transparency and trust by making source code available, facilitates collaborations and community contributions, and enables automation with CI/CD for more efficient management and maintenance.
To link to NPM, copy the https address of the repository and add it to package.json:
mkdir string-reverser-jm # cria a pasta via terminal cd string-reverser-jm # acessa a pasta via terminal
Log in to NPM using your login details:
npm init
Run the command below to publish the package:
{ "name": "string-reverser-jm", "version": "1.0.0", "description": "A simple utility to reverse strings, useful for demonstrations and small projects.", "main": "index.js", "scripts": { "test": "echo \"No test specified\" && exit 1" }, "author": "Juliana Macedo <contact@starcoders.info> (https://www.starcoders.info)", "keywords": [ "string", "reverse", "utility" ], "license": "MIT" }
Okay, the package will soon be available in the NPM registry!
https://www.npmjs.com/package/string-reverser-jm
When making updates or bug fixes, increase the version number in package.json according to semantic versioning using one of the commands below:
function reverseString(str) { if (typeof str !== "string") { throw new TypeError("Expected a string as input"); } return str.split("").reverse().join(""); } module.exports = reverseString;
And then publish the updated version:
npm link
The above is the detailed content of How to publish a package to npm: a step-by-step guide. For more information, please follow other related articles on the PHP Chinese website!