Note: Check out the entire supplemental source code for this blog series.
Did you know that there are 8 new JavaScript libraries created every second! Okay, well, I made that statistic up, but there are a heck of a lot of JavaScript libraries. JavaScript has become the most ubiquitous programming language in the world and npm, which boasts nearly 2 million packages (turns out there is a new package published about once every two minutes), is the largest package registry. However, maintaining and releasing a public JavaScript library can have a lot of repetitive tasks. In this article I’ll show you some of my favorite tools and techniques for creating and publishing a public JavaScript library.
Prerequisites
For this tutorial, we’ll be using git for source control management, Node.js for our JavaScript runtime, and npm for our package manager.
Source Control Hosting - GitHub
For this tutorial, we’ll use GitHub, the most popular source control hosting service. First we’ll need to create a public repository.
I’ll have GitHub initialize the repository with a README file, add a Node .gitignore file and add an MIT license file.
Now our repository should like like this on GitHub
And I can now clone the library to my local environment with the following command: git clone https://github.com/steve-haar/sample-javascript-library.git
Code - JavaScript
Let’s add some basic functionality to our project by creating a ./src/index.js file:
./src/index.js
function greeting(name) {
return 'Hello, ' + name;
}
module.exports = greeting;
We can test this in node to make sure it works:
> node
Welcome to Node.js v15.14.0.
Type ".help" for more information.
> var greeting = require('./src/index.js');
undefined
> greeting('steve')
'Hello, steve'
>
Publishing - npm
Now let’s publish our package on npm. First, we’ll run npm init and answer the prompted questions and it will create a file like this:
./package.json
{
"name": "sample-javascript-library",
"version": "1.0.0",
"description": "a sample JavaScript library",
"main": "./src/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/steve-haar/sample-javascript-library.git"
},
"keywords": [
"sample",
"javascript",
"library"
],
"author": "Steve Haar <info@stevehaar.com>",
"license": "MIT",
"bugs": {
"url": "https://github.com/steve-haar/sample-javascript-library/issues"
},
"homepage": "https://github.com/steve-haar/sample-javascript-library#readme"
}
Next, we’ll run the npm install command to create a package-lock.json file which will be useful if our library ever has any dependencies.
Next, we’ll login to npm by running the npm adduser command and following the prompts.
After we’re logged in, we’ll run the npm publish command to publish the package to npm’s public registry. Note that the library’s name will have to be unique, so if you’re following along, you’ll have to use a different name.
We can confirm that the package was published successfully by running the command npm vew sample-javascript-library or by viewing the library on npm at https://www.npmjs.com/package/sample-javascript-library.
Commit
Now we’ll commit these changes to GitHub
git add .
git commit -m "feat: initial commit"
git push -u origin main
Finally, we’ll tag this commit which will be helpful to maintain and automate our releases:
git tag v1.0.0
git push --tags
Summary
Our library can now be installed and used by anyone by running npm install sample-javascript-library. We also have a public repository at https://github.com/steve-haar/sample-javascript-library allowing others to view and contribute.
Next, let’s review commit message conventions.