Five of Our Favourite NPM Tools in 2020

MH - Senior Developer

04/07/20

The Node package manager (NPM) is a useful tool when building modern web apps. Programmers don’t want to reinvent the wheel, so they pull down open-source solutions to help them on their way. It’s not without fault and to be used with caution in a lot of cases, but there are a host of tools smooth some of the rough edges. Here’s a few of our favourites.

1. BundlePhobia

We’re scared of bundle sizes and so are your users, whether they know about it or not. Big bundles equate to large downloads and long loading times, but we’ve already covered the problems of long loading times before.

The cost of a package

BundlePhobia is a great online resource to root out some easy wins for performance. Search for the larger packages in your project and quickly see estimates for download time and package composition, death to deep dependencies! Similar packages are often suggested, there may be a smaller alternative that functions similarly. There is also BundlePhobia CLI available for desktop usage.

2. Depcheck

Find unused and missing dependencies in a pinch with this handy tool. Use Depcheck to analyse your project and quickly clean up your act. This is a team favourite following refactoring, or god forbid, some copy and paste from another project. Node modules get large enough without help from human error!

Packages get left over or installed incorrectly sometimes, let’s skip the bloat and the errors.
npm install -g depcheck
/myrefactoredproject/depcheck

3. Bundle Analyser

This top-tier tool for bundle optimisation, Bundle Analyser, has saved us hours rooting out unused or inefficient JavaScript and styles in our webpack bundles. “Visualize size of webpack output files with an interactive zoomable treemap”. We love using this tool with our GatsbyJs builds, really shredding those download times.

Bundles of joy

Install with npm or yarn:

npm install --save-dev webpack-bundle-analyzer

Then register the plugin in your webpack config. More usage details available on the webpack bundle analyzer github page.

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

4. Dependabot

Js libraries almost never get updated once installed, every developer should hear that little voice shouting, “what about the security vulnerabilities?!” Bundled web app projects probably see more updates, but it is still a lot of busy work when you’ve got a lot of products or clients live.

Screenshot of a Dependabot pull request
An example from https://dependabot.com/

Dependabot takes some of the pressure off with automated dependency updates. Dependabot creates pull requests ready to merge, get your tests rolling with CI and you’re onto a winner for keeping those projects more secure. Plus, Dependabot is moving natively to GitHub, dead easy.

5. Verdaccio

Speaking of security. Many developers will remember the controvseries within the NPM community. Give yourself an extra layer of security with a private npm proxy registry. Our choice is Verdaccio, a simple, zero-config-required local private npm registry. Paired with Docker Verdaccio is a recipe for greatness. But don’t take our word for it, hear it right from the horse’s mouth.

Thinking Forwards

If you’re talking about NPM, security will always be a hot-topic. The original developer of Node.Js knew it and as with all standards, if you think it has problems you must develop yet another standard.

Meet Deno, its early days for this Node.Js competitor but it’s worth watching.

https://camo.githubusercontent.com/68631b19ad7605c7f5f1f161f5dcc9452cc288f9/68747470733a2f2f64656e6f6c69622e6769746875622e696f2f686967682d7265732d64656e6f2d6c6f676f2f64656e6f5f68725f636972636c652e706e67
Deno, is Node becoming a dinosaur?
https://imgs.xkcd.com/comics/standards.png
Relevant XKCD