Steps to create your own NPM module

Creating your own NPM (Node Package Manager) module is a powerful way to contribute to the JavaScript ecosystem, showcase your skills, and solve real-world problems. NPM is the largest package registry, hosting thousands of reusable code snippets that make developers’ lives easier. By developing your own module, you can share your solutions, streamline repetitive tasks, and even gain recognition in the tech community.

Whether you’re building a utility library, a custom tool, or a unique feature, the process of creating an NPM module involves coding, documentation, testing, and publishing. It’s an excellent learning experience that enhances your understanding of modular development, package management, and open-source collaboration. Plus, once published, your module becomes a reusable building block that others can integrate into their projects with a simple command.

In this guide, we’ll walk you through the step-by-step process of creating, packaging, and publishing your very own NPM module, empowering you to leave your mark on the JavaScript world.

Create two folders, one for the library we are going to build and another we are going to view the demo

Lets start with npm init on both folders

Install parceljs on the library folder with following link

Create src/index.ts

Add some code to index.ts

Open package.json and update (All codes are available in the above link)

Install parceljs on the demos folder with following link

Create src/{foldername}/index.html, style.css, app.js files

Link your script and style file to html file

Now go to package.json and update the file as below

Note the source should be updated from .js to .html

Now open your command prompt in the demos folder and run

npm link ../library

If you have the library in some other folder, map it properly.

Import the library in app.js file

Run npm start on demos folder

Run npm run watch on library folder

That’s it. If you don’t see the change, delete the import line and retype it. Thing will work