Publish JavaScript packages on npm

21 minutes

npm is like a giant library of code building blocks. There are tons of these “blocks”, aka “packages” that we can compose together to build cool things. We can use packages by other developers, but we can also write and publish our own.

In this course we will learn how to create, publish, and update our own packages. We will create a JavaScript utility module to filter out sensitive words from a string, including tests and development file watching. We will then cover publishing and updating our package. This same approach can be used to create and publish other types of packages too like components (React, Angular, Web Components etc.) and command line interfaces.

pro-course-rss-logo

PRO RSS Feed

Add version control to npm packages using git init

P

Add manifest files to npm packages using npm init

P

Set up compilation of source code using babel with npm scripts

P

Run builds on file changes using watch with npm scripts

P

Set up testing of source code using jest with npm scripts

P

Add package functionality using npm scripts

P

Test npm packages locally in another project using npm link

P

Document npm packages using README files

P

Publish npm packages using npm publish

P

Update published npm packages using np

P
js tutorial about Add version control to npm packages using git init

Add version control to npm packages using git init

0:57 js PRO

npm packages almost always have a git repo tied to them for version control. We will start our package by initializing a git repository.

js tutorial about Add manifest files to npm packages using npm init

Add manifest files to npm packages using npm init

2:00 js PRO

We can create a package.json automatically by running npm init and answering the questions it gives. This becomes the “manifest” file for our package; it is used to populate the published npm page as well as to help the package manager to know how to install the package in consuming projects.

js tutorial about Set up compilation of source code using babel with npm scripts

Set up compilation of source code using babel with npm scripts

2:27 js PRO

We can write our package using the latest JavaScript syntax with a compilation step. In this lesson we will install babel-cli and babel-preset-latest and wire up a build script to compile our code using the babel “latest” preset when source files change. This means those using our package can use it in any version of JavaScript even though we are using the latest syntax for our source code.

js tutorial about Run builds on file changes using watch with npm scripts

Run builds on file changes using watch with npm scripts

0:55 js PRO

We can set up a file watcher to compile automatically while we develop. In this lesson we wire up a new dev script to run the build script when source files change.

js tutorial about Set up testing of source code using jest with npm scripts

Set up testing of source code using jest with npm scripts

2:42 js PRO

Adding tests to our package can ensure it works as expected. We will install a test framework jest. We will then create a test script to run our tests. Then we will create a test:watch script to keep tests running while we develop.

js tutorial about Add package functionality using npm scripts

Add package functionality using npm scripts

3:18 js PRO

We will run our dev and test:watch scripts to develop; we will create some tests for the expected functionality of our package; it should conceal any words in a string that are in a blacklist of words. Then we will write the logic to make those tests pass.

js tutorial about Test npm packages locally in another project using npm link

Test npm packages locally in another project using npm link

4:01 js PRO

We will import our newly published package into a new project locally to make sure everything is working as expected. We can do this locally before publishing with npm link. This creates a symbolic link in our node_modules folder, so our unpublished local package is used like an installed published package. This is important because it lets us test making changes to our package and using them immediately without publishing and updating a package with each change we want to test. This is good practice to do before publishing a new version of a package.

js tutorial about Document npm packages using README files

Document npm packages using README files

2:01 js PRO

Users need to know how to use our package. We can make this easy for them with a README.md file containing information about our project. We will put a simple example at the top for easy use.

js tutorial about Publish npm packages using npm publish

Publish npm packages using npm publish

1:29 js PRO

In this lesson we will publish our package. We will first add a prepublish script that runs our build script; this will ensure the built folder gets added to npm when published. We will also add a .npmignore so that only our built files get installed. We need to run npm adduser to log in to an npm account. We can then run npm publish to publish our package and view it on npm.

Note: if you want to actually publish the package from this course, you'll need to rename it since sensitive-words is already taken. You can use a scoped package name for this as well.

js tutorial about Update published npm packages using np

Update published npm packages using np

1:38 js PRO

When we want to update our package we need to do a few things: pull latest from our git remote, bump the npm version and git tag, push to our remote, push tags to our remote, and then run npm publish. Phew, that’s a lot. In this lesson, we will set up a release script using the np package to simplify this process.

Presented by:

Trevor Miller

Director of Instructor Happiness at egghead.io. Software Engineer. Musician. Mormon.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?