Keep your NPM dependencies up to date with npm-check
Tags: javascript, npm, node, build
Published: 2019-11-13 23:23:47

I like [Node.JS](https://nodejs.org/en/) ecosystem because it is full of amazing packages ready to be used to improve our productivity.

Need a markdown parser? Drop [`markded`](https://www.npmjs.com/package/marked) it to your project.
Want to [prerender](https://www.netlify.com/blog/2016/11/22/prerendering-explained/) your site? add [`puppeteer`](https://www.npmjs.com/package/puppeteer) and you are ready to go in minutes.
Searching for a [web components](https://developer.mozilla.org/fr/docs/Web/Web_Components) library? Why not try [`lit-html`](https://www.npmjs.com/package/lit-html).

Anyway, [NPM](https://www.npmjs.com/) is a huge source of great ideas and opportunities to make your next project a success. While this is IMHO what makes Node.JS shine among the others languages, it can be easy to lost track of the constantly emerging new versions of those tools.

Maybe you are 3 patch late on your [`react`](https://www.npmjs.com/package/react) version? You might have missed some precious performance optimizations that would save your some precious milliseconds, the same precious time your users did not wait, causing a higher bouce rate on your amazing public website...

If you would knew, you would have made the effort to subscribe to the mailing list and be informed whenever new versions are out. Or you might simply search for new releases of times to times. Why not, this is also good to make you read these changelogs, isn't it?

Ok I admit, that does it, ... unless you are running this 43 dependencies project and you cannot keep up anymore with the tons of new fixes and features.

# `npm-check` to the rescue

This tool works with your `package-lock.json` or `yarn.lock`, so make sure you have generated one before trying to use it.

It works by fetching the latest version of each of the packages in your lock file (using a call to the NPM package registry), and simply check for differences.

One notable feature :

> When updates are required it will return a non-zero response code that you can use in your CI tools.

This makes very useful to use [`npm-check`](https://www.npmjs.com/package/npm-check) in your test/build process, and that what made me adopt this tool for every of my next projects.

# Integration with Gulp

I personnally use gulp for my build process, so [`gulp-npm-check`](https://www.npmjs.com/package/gulp-npm-check) is my go to tool for that. It will help me cancel my `npm run build` by throwing a warning with a list of my outdated packages.

```javascript
// gulpfile.babel.js
import { src, dest, parallel } from "gulp";
import plumber from "gulp-plumber";
import browserify from "gulp-bro";
import pug from "gulp-pug";
import sass from "gulp-sass";
import npmCheck from "gulp-npm-check";

const js = () => src("src/js/index.js")
  .pipe(plumber())
  .pipe(browserify())
  .pipe(dest("dist/js"));

const html = () => src("src/pug/index.pug")
  .pipe(plumber())
  .pipe(pug())
  .pipe(dest("dist"));

const css = () => src("src/sass/index.sass")
  .pipe(plumber())
  .pipe(sass())
  .pipe(dest("dist/css"));

const checkOutdated = done => {
  npmCheck(done);
};

const build = parallel(checkOutdated,js, html, css);

export { build };
```

So whenever I run this:

```bash
npm run build
```

I get this nice little console report whenever one of my dependency is out of date, which forces me to upgrade my dependencies before building again.

# Some others similar tools

Meabed wrote a quick review of his favorite tools for checking and bumping versions of outdates packages. Just check it out 😉

{% link https://dev.to/meabed/keep-your-javascript-up-to-date-kuwjs-1d0d %}

# Conclusions

Including this tool can be very quick, and this is a real time savior for the future. Keeping your dependencies up to date may lead in quicker micro improvements that could bring more value if you use it for larger projects.

**PLEASE** make sure to always read the changelogs of the tools you upgrade in order to avoid bad surprises. For that, [GreenKeeper](https://greenkeeper.io/docs.html) or [Dependabot](https://dependabot.com/) (which can be enabled in your GitHub repository) can be of a great help when it comes to check if upgrading a dependency does not break your build (if you have the appropriate tests).

Most of the packages follow the [semver](https://semver.org/) convention, but we stay humans so mistakes and omissions can happen: always be careful. To ensure a package will not break with your existing code is also a great opportunity to stay informed with all the possibles features of your favorites tools by diving into the changelogs, and maybe who knows, push you to contribute to it? 😄

I hope this post gave you some build improvements inspirations, and while I wait for your feeback, I whish you some great things in your next projects.

Happy optimizations!