Introduction to NPM - Building and Publishing Packages to NPM

Introduction to NPM - Building and Publishing Packages to NPM

Articles in series:
  1. Overview of NPM - How Did I Publish a Package on npm?
  2. Introduction to NPM - Building and Publishing Packages to NPM
Daily short news for you
  • Manus has officially opened its doors to all users. For those who don't know, this is a reporting tool (making waves) similar to OpenAI's Deep Research. Each day, you get 300 free Credits for research. Each research session consumes Credits depending on the complexity of the request. Oh, and they seem to have a program giving away free Credits. I personally saw 2000 when I logged in.

    I tried it out and compared it with the same command I used before on Deep Research, and the content was completely different. Manus reports more like writing essays compared to OpenAI, which uses bullet points and tables.

    Oh, after signing up, you have to enter your phone number for verification; if there's an error, just wait until the next day and try again.

    » Read more
  • I just found a quite interesting website talking about the memorable milestones in the history of the global Internet: Internet Artifacts

    Just from 1977 - when the Internet was still in the lab - look how much the Internet has developed now 🫣

    » Read more
  • Just thinking that a server "hiding" behind Cloudflare is safe, but that’s not necessarily true; nothing is absolutely safe in this Internet world. I invite you to read the article CloudFlair: Bypassing Cloudflare using Internet-wide scan data to see how the author discovered the IP address of the server that used Cloudflare.

    It's quite impressive, really; no matter what, there will always be those who strive for security and, conversely, those who specialize in exploiting vulnerabilities and... blogging 🤓

    » Read more

Problem

In the previous article, I summarized the process of pushing a package to npm. In this article, I will go into detail about how I built my package, specifically a package for vue.js that handles OTP code input.

The source code for the package can be found on GitHub, and the npm package is named vue-otp-2.

Setting Up the Framework

From the beginning, I knew that I wanted to create a package for vue.js, so I found a framework that supports this, vue-sfc-rollup.

This framework provides a minimal setup to facilitate quick development, including:

  • rollupjs.org - support for building libraries
  • Integrated Babel.js
  • A sample Single File Component (SFC) for implementing code
  • ...

Writing the Logic

In terms of logic, this package simply creates a fixed number of input fields that only allow numbers to be entered. When all fields are filled, an event is triggered containing the entered data. Additionally, the package also allows seamless deletion of data in the fields without having to click on each individual field.

The idea was that simple, but I encountered some issues while making it work smoothly without any errors. After a few hours of work, I finally completed it.

Testing

After completing everything, I began the testing phase. In reality, I had been testing throughout the code writing process.

This step involves verifying all possible cases, from the happy cases to the exception cases. Due to time constraints, I decided to go with manual testing. If you have time, you can learn more about writing unit tests to make the package even better.

Creating a Demo Page

Once all the cases passed, I proceeded to create a demo page.

The demo page is important because it allows users to interact with the package in a real-world scenario. It builds trust with users and allows them to verify if this is the package they truly need. Additionally, having a demo page shows investment in your package, enhancing its credibility.

Creating a demo page is quite simple. All you need to do is find a service that allows you to deploy a Vue.js application. Fortunately, I knew about Vercel, which is the successor of now.sh and supports this.

Writing Documentation

Documentation is crucial, as it guides users on how to use your package. Therefore, invest time in completing the documentation.

Documentation should be clear and concise, focusing on the main features that the package provides.

Usually, documentation is structured as follows:

  • Brief introduction to the package
  • Get started: Introducing installation and usage
  • API: In-depth analysis of functions and attributes in the package
  • Dev: Instructions on contribution
  • License
  • ...

You can write the documentation in the README.md file or use some tools to present it, such as GitBook.

Publishing the Package

The final step is pushing the package to npm using the npm CLI.

But before doing so, keep in mind whether your package needs to be built. Typically, building is the step where your code is compiled into pure JavaScript.

In my package, I need to run the build command before publishing:

$ npm run build

Then, simply publish it:

$ npm login
$ npm publish

Conclusion

Pushing a package to npm is not difficult, but you need to pay attention to choosing the platform your package will run on, as well as the tools that support the conversion of your code for browsers or Node.js usage.

Premium
Hello

5 profound lessons

Every product comes with stories. The success of others is an inspiration for many to follow. 5 lessons learned have changed me forever. How about you? Click now!

Every product comes with stories. The success of others is an inspiration for many to follow. 5 lessons learned have changed me forever. How about you? Click now!

View all

Subscribe to receive new article notifications

or
* The summary newsletter is sent every 1-2 weeks, cancel anytime.

Comments (0)

Leave a comment...