How To Create Modern NPM Packages

Master all the way from creating a basic package to CI/CD and ES6 support

Source: Freepik

NPM makes code sharing and reusability easy in the javascript ecosystem. NPM packages let you share code between your private projects too. So, you don’t have to copy/paste and maintain code on multiple projects.

This tutorial will help you out whether you’re creating your first package or want to enhance your existing packages.

Before continuing, I assume that you have a basic knowledge of javascript, git, and npm. Also, if you don’t have an npm account, create one now.

A Gist Of The Tutorial

• Create a basic package
• Test package locally (package linking)
• Publish package to npm
• Manage package updates, versioning, and republishing
• ES6 support
• CI/CD workflow for publishing

Looking to create a React Library with TypeScript, Rollup, and Storybook? Try Create React Package.

Create Basic Package

Creating a basic package is fairly simple and consists of the following steps.

1. Create package directory

mkdir test-package

Change into the root directory

cd test-package

2. Initialize git

Using git is not necessary but it makes the package easier to maintain and lets others inspect your code and contribute. We’ll be using GitHub Actions later in the tutorial so I suggest that you use GitHub too.

git init
git remote add origin git://git-remote-url

We are initializing git before the npm package initialization so that npm will automatically pick our git remote URL for package.json while executing npm init and will eventually display it on the package page of npm.

3. Init npm

package.json is the way to tell NPM what your package does. name and main fields are mandatory. Every package name should be unique. If the name you want for your package…