Building And Publishing A NPM Package With JavaScript

#webdev #javascript #npm #beginners

If you've done any development with JavaScript, it's very likely you've used an npm package. There are a lot of great packages out there, like lodash or moment, that developers everywhere are familiar with. Some companies even use private npm packages for their enterprise applications. You can find and use packages for just about anything you can think of. But do you know how to make one?

There is a strong chance you've run into an issue repeatedly and you haven't found a fix for it online. Making an npm package could be one way to solve that issue and share the fix with the other developers crawling through forums from 2008 for answers. As long as you know some JavaScript, you can build and publish your own packages!

As an example, we will build a package that takes an array and does random operations based on the length of the array. Once you finish this walk-through, you'll know all the steps in creating and publishing an npm package.

Steps to create a library

To begin with, you can start with your code like you normally would. It's a good idea to practice writing tests first for your packages so that you know for sure they work like they should.

Tests

We'll start by writing a few tests. This is going to be a regular JavaScript file so you can use any test library you're comfortable with. I'll be writing a few tests with Jasmine. You should definitely do more testing than this on a real package you plan to share with other developers.

describe("takes an array and adds stuff sometimes", () => {
    it ("should return an array of the same length as the input", () => {
        let arr = [5, 68, 99, 52, 591];
        let newArr = arrayRandomizer(arr);
        expect(newArr).toBe(arr.length)
    });

    it ("should add a string to some of the values in the array", () => {
        let arr = ["test1", "test54", "test87"];
        let newArr = arrayRandomizer(arr);

        expect(newArr).not.toBe(arr);
    });
})

Implementation

Now that you have your tests in place, write the implementation for your code to pass them.

function randomizeArray(arr) {    
    arr.forEach((part, index) => {
        this[index] = this[index] + "guess" + index;
    }, arr);

    return arr;
}

Clean up

You are pretty much done at this point. There is some clean up you need to do to prepare to publish. First, create a package.json file if you don't have one. This will hold any dependencies your package will have on other packages and the metadata for your package. You won't be able to publish the package to npm without the package.json file.

{
    "name": "array_randomizer",
    "version": "1.0.0",
    "main": "array_randomizer.js"
    "author": "your name"
}

Publish

All that's left is the publishing itself. Doing that is as simple as installing the npm-publish package. Once you know for sure your package is ready to be used by other people, use that publish package. It handles the behind the scenes stuff for you which leaves you to do other things (like make sure it actually publishes). You can celebrate a bit now.

Your package has been published and you can start telling people about it! Do some periodic maintenance to make sure your package doesn't have any vulnerabilities. Updating your packages follows the same method as publishing them. You just run the npm publish script and the files get updated.

Hey! You should follow me on Twitter because reasons: https://twitter.com/FlippedCoding