Keep your NPM dependencies up to date with npm-check

I like Node.JS ecosystem because it is full of amazing packages ready to be used to improve our productivity.

Need a markdown parser? Drop markded it to your project.
Want to prerender your site? add puppeteer and you are ready to go in minutes.
Searching for a web components library? Why not try lit-html.

Anyway, NPM 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 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 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 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.

// 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:

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 😉

Keep your JavaScript up to date - kuwjs

Meabed ・ Jul 3 '19

#node #npm

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 or Dependabot (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 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!

Comments

[Mohammed Ismail Ansari]

Cool, especially the integration with gulp! I used to use npm-check-updates for the same purpose a long while back.

[Anwar]

I checked npm-check-updates (no puns intended), also very cool indeed!