Ciprian Craciun - FrontEnd Developer

Ciprian Craciun

FrontEnd/Web Developer

Engineering is about making a product better, learning from past mistakes and create a process which is easy for all to understand.

How to manage your package JSON file with npm

We are using every day npm package and sometimes we forgot to check the latest updates from the package JSON file so how we update this file with npm?

The best approach for a front-end project is always to have the latest packages updated. Why? You are up to date with the latest technologies and also you can prevent problems related to security.

Use npm outdated

If we run npm outdated command in the root of the project, for a project with a package JSON file, we can see how many npm packages require updates.

npm outdated
npm outdated

Run npm update

Running npm update will auto-update packages without the need to update them manually.

Before running npm update if you have some packages that don’t need updates or maybe it’s a package with some deprecations, no longer maintained by the author, you can change the version of the package to be fixed like this: “next”: “^10.2.3” → “next”: “10.2.3”.

Removing the “^” from the package version, we set a fixed version and when we run npm update that package will not be updated to the next version.

Scan your project for vulnerabilities with npm audit

Yes, we can audit our packages running npm audit, this will tell you if you have any vulnerabilities and what to do to fix them.

Npm audit report
npm audit example report

Read carefully all the pieces of information from the report, some suggestions may not be a fit for your project.

The last command you should run after report review is npm audit fix, this will automatically update all the broken packages. Other options for npm audit can be found on the official docs.

From my point of view, this would be a good behavior to have as a Developer, check your packages because when you code new features it’s easy just to add packages without checking for vulnerabilities.

If you like what I suggested here you can follow me on Twitter or subscribe to my newsletter.

Other articles:
Generate meta tags in react for sharing

Sharing is caring!

Leave a Reply

Your email address will not be published. Required fields are marked *