CODEWITHSUNDEEP
reactjsnpmopen-source
Yangshun Tay
Yangshun Tay

Reputation: 53159

What is a convenient way to upgrade dependencies across multiple npm projects?

For open-source library authors, especially React-related, it is common for them to have written and published multiple React components. However, when React releases a new version (e.g v16), it is a hassle to upgrade each of those components to the latest React version.

What's a convenient way to upgrade the React dependencies in all those packages, with stability in mind? I don't want to be manually going into each project and running npm update as that will take very long. I considered writing a script to do it for me, but I'm wondering if there is any tool out there they can do the same or even better, and upgrade packages in all my projects at once?

This question is not really specific to React, it can apply to Angular, Vue, etc, or other commonly used npm library as well.

Upvotes: 1

Views: 2616

Answers (2)

Tashkhisi
Tashkhisi

Reputation: 2252

If you are on gitlab, github, self-hosted gitlab and other related source control you can check my answer What is the best way to authomatically update project dependecnies

Long story short you can use Renovate which is a great tool to update your dependencies across different package manager like maven, npm, gradle, pip and other package managers. It can update dependencies for multiple project at once and also it has other benefits. actually it automatically create merge request with those update whenever new update are available for those dependencies. although it can be used outside CI/CD but if you have CI/CD with creating those merge request it can run your pipeline and make sure everything is OK after that update.

Upvotes: 1

Jurosh
Jurosh

Reputation: 7767

Simplest way to update dependencies:

npm update

It will update only on based ranges in package.json, eg. from 1.0.0 to 1.9.0, but not to 2.0.0. See semantic versioning. It's not good idea to setup automatic major version upgrade in package.json, so usually npm update will ignore major releases.

If you want to upgrade dependencies major versions, it's more trickier. There is high possibility that there will be breaking changes in libs, and you would need to upgrade your code as well.

What can help you with update to latest versions is this library npm-check-updates.

 npm install -g npm-check-updates
 ncu // Shows new dependencies
 ncu -u // Will do upgrade in package.json

This library will search for latest packages and even will do update.

Specifically for React there is CLI which may be used, if you don't need custom webpack build. React-create-app will create application with hidden dependencies like React, ReactDOM, Jest, Webpack, .. and when you want to upgrade then it's as simple as updating one dependency for whole React&Webpack stack.

npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start

If you are building similar applications (but cannot use ReactCLI), you can build your own webpack configuration which might be reused in all your application and it will cover build process. This might hide build dependencies like Webpack, React, Router, etc.

Update: Is possible to upgrade multiple projects quickly and seamlessly? eg. with simple script.

It's probably very complicated or even impossible. You would need to have exactly same dependencies in all projects... as you might have some incompatible versions of different libs. Probably best way would be to create common libraries stack like react-cli has and then use this stack as single dependency. But still you would need to upgrade and test each project separately after upgrade of "stack" dependency - also usually you would also need to upgrade codebase because of API changes. Making update script may be quite complex and probably not worth it.

Upvotes: 4

Related Questions