Introduction to NPM - Building and Publishing Packages to NPM

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.