NPM Primer: Publishing your first npm package
Sanskar Gupta
Posted on July 15, 2020
Publishing an npm package to npmjs registry can be your first step towards being part of open source community.Before diving into publishing a piece of javascript code as a package, let's brush up some relevant nomenclature.
What is NPM for?
npm is a package manager for the Node JavaScript platform.It manages packages/libraries in in a single place and facilitates node to find them when required.The registry www.npmjs.com hosts numerous free packages to download ,install and use in your projects.
To set up node and npm please follow the official documentation Link
Setting up the piece of code
Let's consider an example and create an npm module exposing some methods that will come in handy for array processing.
Make project directory
mkdir array-util
cd array-util
Make it a node project
npm init
This will create a file package.json that holds name of dependencies and scripts like test, eject, build etc.
Use the command line to follow through the entire process like the below image:
The package.json file will look like:
{
"name": "arrayutil",
"version": "1.0.0",
"description": "Package having methods for array processing",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Sanskar Gupta",
"license": "ISC"
}
Create a directory src and place your js file and name it as utils.js .This file will hold
all the methods that are supposed to be exposed.
const arrayutils = {
sort: (array) => {
return array.sort()
}
}
export default arrayutils
Note that here ES6 is being used, we will convert it to ES5 using babel.
Create a file export.js under src that will will serve as the entry point for the module.
export { arrayutils } from "./utils"
Cant ignore .npmignore
Create a file namely .npmignore in the project root, here we will add all the directories or files that should not contribute to out npm module for eg, .vscode, .idea , src.
Note that here we are writing our module in ES6 that will be converted to ES5 later under the dist folder that will hold the cross browser supported module, as a result we need to add src (in ES6) to .npmignore to mitigate the unecessary increment in package size.
Modify package.json
Change the main field in package.json to "./dist/export.js"
Add a publish script under scripts
Include babel core and babel cli
PS: Babel is a free and open-source JavaScript transcompiler that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript that can be run by older JavaScript engines.
The package.json should look like:
{
"name": "arrayutil",
"version": "1.0.0",
"description": "Package having methods for array processing",
"main": "./dist/export.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"publish:npm": "rm -rf dist && mkdir dist && babel src -d dist --copy-files"
},
"babel": {
"presets": [
"@babel/preset-react"
]
},
"author": "Sanskar Gupta",
"license": "ISC"
"dependencies": {
"@babel/core": "^7.9.0",
},
"devDependencies": {
"@babel/cli": "^7.8.4",
"@babel/preset-react": "^7.9.1"
}
}
Note that on running the command:
npm run publish:npm
a folder named dist will be created having code in ES5 format.
Lets publish to npm!
1)Commit and push your changes to your preferred branch.We need to keep the commit tree clean before publishing to npm.
2)Run npm login
3)Login with the credentials.Make sure you have created an account on https://www.npmjs.com/
4)You can check your login status by npm whoami
5)Run npm run publish:npm
to build
6)If publishing for the first time you can directly run npm
, if updating the current published version execute
publish
npm version <version_number>
before publishing
You can follow any version sequence as per your choice
though it is suggested to use 1.x.x
7)Go to npmjs and validate your package by downloading and using in some other project
8)Note that its always good to have a readme, so make sure that README.md is added stating instructions on how to import and use the module preferably with an example.
Example Repo: https://github.com/Sanskar95/snack-toast
PS: You can check the download stats of your module on
https://npm-stat.com/
Posted on July 15, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.