DEV Community

Cover image for πŸŽ†HOW TO CREATE YOUR OWN PACKAGE ON NPM EASILY, QUICKLY, AND UPDATED 2024πŸŽ†
Luciano Menezes
Luciano Menezes

Posted on

πŸŽ†HOW TO CREATE YOUR OWN PACKAGE ON NPM EASILY, QUICKLY, AND UPDATED 2024πŸŽ†

This post is also available, originally, in Thread format on Twitter and, in Portuguese, on TabNews.

Image by Hare Prananda on LinkedIn

⭐- WHAT ARE WE GOING TO DO?

In this thread, I will teach you how to create your own package on NPM, in an EASY AND QUICK way, with JavaScript/TypeScript!

This thread will be based on my own package, BETTER-FORMAT, which I will use as a reference!

See more here on GitHub!

Better-Format by Luciano655dev on GitHub

βœ…- WHAT IS NPM?

NPM, or Node Package Manager, is simply a package manager for Node.JS.

In other words, it's a place where anyone can create and publish packages.

Here we have both HUGE and smaller packages, all useful for something!

βœ…- BEFORE CREATING...

Before creating an NPM package, think about what this package will do.

Better-Format, for example, helps you format and validate some types of data, such as strings, numbers, CPF validation, card, etc...

Just have an idea and put it into practice!

βœ…- WHAT YOU WILL NEED

To create your first package, you just need an account on NPM and knowledge in some language, like JavaScript!

Depending on the package, you can also use other existing packages to help you, such as axios, bcrypt, etc...

βœ… 1 - HOW TO GET STARTED

First, you need to initialize a package, something you've surely done before, with npm init.

Fill in as much information as possible here, as it is important.

Before that, it's also good to create a repository on GitHub to link to your project!

βœ… 2 - FIRST CODE

After initializing the package, create an index.js file and put something in it, like a hello world.

Then, run the npm link command, which will start your package locally, making it ready for testing.

βœ… 3 - CREATING THE PACKAGE

From here on, it's up to you and your creativity!

Create as many folders as you want, install as many dependencies as you want, and make your code work!

After that, just export everything in your index.js with module.exports = {...}!

βœ… 4 - CREATING TESTS

Along with everything you do, I strongly recommend running a test for it!

To do this, just install Jest with npm i jest and create a ./tests folder, for example.

Here, you can test the functions you created! Use and abuse it!

βœ… 5 - TESTING LOCALLY

Remember we ran the npm link command before? That's what allows us to test the package before it's published!

In another folder, run the command
npm i {my_package}

Then just import it with
const myPackage = require('my_package')

and test as much as you want!

βœ… 6 - PUBLISHING THE PACKAGE

After developing the package, the simplest part is to publish!

Run the npm login command and enter your NPM account!

Then, check the version and run npm publish and YOU'RE DONE! YOU'VE ALREADY PUBLISHED YOUR FIRST PACKAGE!

To update, change the version and run the same command again!

βœ… 7 - AFTER PUBLISHING

After publishing, promote your package!

Post it on your social networks, everything! Besides, NPM itself distributes your package when you create it!

Remember to create a good README to attract people and make everything right on GitHub!

Check Issues, PRs, create a good environment for other developers, and hopefully, your package will be a success!

⭐ - BONUS

If you want to see more content about it, there are two videos that I HIGHLY recommend you to watch!

One from WebDevSimplified that shows in detail how to create the package.

And another from Paula SantamarΓ­a, which shows how she created her own package in a VERY well-produced video!

WebDevSimplified video here

Paula SantamarΓ­a video here

πŸ˜„ - THANK YOU!

Hope you enjoyed it!

It had been a while since I last did a thread, mostly due to lack of good content, but I always want to post more!

If you liked it, visit the Better-Format repository! Your contribution will always be very welcome!

Thank you!

Top comments (0)