Maybe you are burning inside with an idea of an NPM package that could revolutionize the world? Or maybe you just want to see what it's all about? This article will be a simple tutorial on how you can get started with creating NPM packages - which I, personally, found to be a quite useful skill to have!
6 min read
·
By Niklas Molnes Hole
·
December 8, 2020
NPM, or Node Package Manager, is a software "library" where JavaScript developers can browse and find handy tools for their projects. These tools - or packages, to be more precise - could be frontend libraries (like react
), a bunch of useful algorithms (like lodash
), or command line tool enhancers (like chalk
- actually made by a Norwegian NPM legend).
The NPM library is huge! Some developers have even created a drinking game because of this. However, where does these packages come from? And how can I create one? I am glad you asked! To answer this, we have to travel to the NPM package factory at the North Pole and gain Santa's tr... No, but seriously, how are they made?
To start from the basics you will need a computer with Node.js installed.
Next, you will have to make sure that when you open your terminal (3 ways to open a terminal on Windows, 7 ways to open a terminal on Mac, Linux users should already know how to do this), write npm
and press Enter ↵
, it does not return an error, but rather:
If this is how your terminal looks like now, then you are ready to move on. If not, you can try out this link.
Before we begin with using NPM, it important that you work inside a folder (or directory) on your computer that is only dedicated to your NPM package. If you don't, you can risk publishing files with sensitive information! And we don't want sensitive information publicly on the Internet, do we?
As we have already opened our terminal from the previous step, we can easily create a folder just by typing in these commands:
package.json
fileIn every NPM project, there exists a file called package.json
:
{
"name": "days-until-christmas",
"version": "0.0.1",
"description": "I lost the count so I made this to keep myself up-to-date next time",
"main": "index.js",
"scripts": {},
"dependencies": {},
"keywords": [],
"author": "🎅 <santa@javascript.christmas> (https://javascript.christmas)",
"license": "MIT"
}
This is necessary as it first of all gives a name
to your package. Secondly, it contains information about the version
of the project - such that users of this package can ensure they are using the correct version. You can find information of all the configurations here.
The most important configuration to note here is the main
value, which is set to index.js
. index.js
will now act as the entry file for the NPM package, meaning this is where you need to place your code. You can add more files later, but the entry file will always be the heart of your package and all other files needs to be connected to this file somehow.
Side note: Even though we will not be using this configuration, it is worth mentioning that you can use dependencies
to include other packages into your package. This enables you to use every single one of the 1.4 million packages in your project! You should probably not include every package in your project, though, as your node_modules
folder (containing your dependencies
) can get quite big really fast, and some packages can introduce potential security issues. It is usually a good indication to use popular packages with few dependencies, and if that is not enough, you can use npm audit
.
To make the package.json
file, you get two choices:
npm init
into your terminal. You will then be prompted with a few questions which results in a generated package.json
file.Choose what you feel the most comfortable with.
index.js
fileAt last, you need to add some JavaScript code to your package that other projects can use. In this tutorial, we are making a package that can calculate days until Christmas.
// Content of the index.js file
function daysUntilChristmas() {
const timeInADay = 24 * 60 * 60 * 1000;
const now = new Date();
const thisYear = now.getFullYear();
let dateOfChristmas = new Date(thisYear, 11, 24).getTime();
if (dateOfChristmas < now - timeInADay) {
dateOfChristmas = new Date(thisYear + 1, 11, 24).getTime();
}
return Math.abs(Math.ceil((dateOfChristmas - now) / timeInADay));
}
module.exports = daysUntilChristmas;
The last line will make the function daysUntilChristmas
accessible by those who want to use your package. Be sure to remember to include this!
When you are ready to test your package, or actually release it, you will need to go through these steps:
If you do not have an NPM user - like most humans - you will need to sign up on the NPM website.
Back in the terminal, you will now need to run:
npm login
Now, just follow the instructions.
Before every release you will need to change your package version as it is not possible to overwrite a existing published version. However, changing a version is fairly simple. Just manually type this in your terminal:
npm version 0.0.1
You can also just change the version in package.json
manually.
This is the last step:
npm publish
And tadaa! You will soon be able to see your package on https://www.npmjs.com/package/\<your-package> (you might also get some seconds of fame on the NPM frontpage 🤩), as well as adding it to your next project using npm install --save <your-package>
or yarn add <your-package>
. If you do not want your project to be publicly visible you can read about how it is done here and here.
Here is also a demo of the days-until-christmas
package from the example which could be worth checking out:
The source code can be found here: https://github.com/niklasmh/days-until-christmas
Be also sure to check out the articles linked at the bottom if you want to dive deeper into the NPM world. There is so much you can do, and this article only scratched the tip of the iceberg.
Now, you have few more things you can do in your future life:
Thanks for reading! I hope you have created a wishlist, cause I already know what packages I want for Christmas 😏🎅
Loading…
Loading…
Loading…
Loading…