Five of Our Favourite NPM Tools in 2020
Posted By MH - Studio Manager04/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.
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!
npm install -g depcheck
/myrefactoredproject/depcheck3. 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.
Install with npm or yarn:
npm install --save-dev webpack-bundle-analyzerThen 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.
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.
