How can I version bump all my dependencies?

Question

Having yarn outdated is quite informative but I'd like to avoid running over package by package doing yarn upgrade.

From yarn's documentation, just yarn upgrade without arguments is said to upgrade all dependencies but there's no change in my project's package.json and yarn outdated shows the same packages versions than before.

Is there some command or argument that just bumps all my dependencies?

If not, is the practice discouraged in some way?

Aerodyne

Answer 1

You can update your packages to the latest version specified in the package.json using yarn upgrade without any args.

This is taken from the docs:

yarn upgrade

This command updates all dependencies to their latest version based on the version range specified in the package.json file. The yarn.lock file will be recreated as well.

This will only update packages that are allowed to be upgraded in the package.json e.g. using ^ (e.g. ^0.13.0 would update to version 0.14.0 if it exists). This will not update your package.json file, but it will update the yarn.lock.

If you want to update dependencies in to the latest version you can use the package npm-check-updates which will update your package.json:

$ yarn global add npm-check-updates
$ npm-check-updates -u
$ yarn upgrade

Delinda

Right. Maybe it does. But it's not reflected in my package.json and yarn outdated shows no difference before and after a full run of yarn upgrade. What am I missing? – Aerodyne

I realised that yarn upgrade only updates packages to the latest version in the package.json if you are using ^ or ~. If your package is specified as a fixed version this will not change. I have edited my answer to add an option to update your package.json. – Delinda

Have you tried yarn upgrade --latest command? According to the documentation, as I understood, it updates the package.json as well. – Acetylene

Answer 2

Upgrade all packages to latest version

yarn upgrade --latest

Nightclub

That only upgrades yarn.lock for me, how can I make it so that it als updates package.json? – Filberto

Answer 3

just run yarn upgrade-interactive --latest and select packages you want to update using space button and press the enter to update.

Iloilo

NOTE: You will need to import the interactive-tools plugin for yarn before using upgrade-interactive, by running this command: yarn plugin import interactive-tools. – Delhi

Answer 4

Answer for users of Yarn v2 and above.

Import the interactive-tools plugin:

$ yarn plugin import interactive-tools

And run it like this:

$ yarn upgrade-interactive

Note that this will also modify the semvers in your package.json.

Rash

Correct answer for 2022, including Yarn v3 – Assignable

Answer 5

If your dependencies are using a range version ("^x.x.x", "~x.x.x", etc), your package.json won't be updated if the latest version also match that range, only your yarn.lock.

If you want your package.json to be updated:

1. Change all your dependencies to a fixed version ("x.x.x")
2. Run yarn to update the yarn.lock
3. Run yarn upgrade-interactive and select all dependencies you want to upgrade

Now both your yarn.lock and package.json will reflect the exact latest versions.

Scorpion

Answer 6

You could also copy your dependecies to a typescript or javascript playground and use Object.entries(obj).reduce((xs, x) => ${xs} ${x[0] }, "yarn add") to generate the command containing all of the packages inside your package.json.

Example

let obj = {
    "@types/react": "^16.3.18",
    "@types/react-dom": "^16.0.6",
    "awesome-typescript-loader": "^5.1.0",
    "babel-polyfill": "^6.26.0",
    "del": "2.2.2",
    "es-cookie": "^1.2.0",
    "es6-promise": "4.1.1",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-clean-css": "^3.0.2",
    "gulp-concat": "^2.6.1",
    "gulp-if": "^2.0.2",
    "gulp-jshint": "^2.0.4",
    "gulp-merge-media-queries": "0.2.1",
    "gulp-rename": "^1.2.2",
    "gulp-rev-all": "^0.9.7",
    "gulp-sass": "^3.1.0",
    "gulp-uglify": "^2.0.1",
    "jshint": "^2.9.4",
    "node-promise": "^0.5.12",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "require-dir": "^0.3.2",
    "run-sequence": "1.2.2",
    "source-map-loader": "^0.2.3",
    "typescript": "^2.9.2",
    "webpack": "^4.12.0",
    "webpack-cli": "^3.0.8",
    "webpack-log": "^1.2.0"
  }

  let res = Object.entries(obj).reduce((xs, x) => `${xs} ${x[0] }`, "yarn add")

  console.log(res)

Output:

yarn add @types/react @types/react-dom awesome-typescript-loader babel-polyfill del es-cookie es6-promise gulp gulp-autoprefixer gulp-clean-css gulp-concat gulp-if gulp-jshint gulp-merge-media-queries gulp-rename gulp-rev-all gulp-sass gulp-uglify jshint node-promise react react-dom require-dir run-sequence source-map-loader typescript webpack webpack-cli webpack-log

I use this playground to quickly generate the command. It is also usefull to quickly generate code from json objects.

https://www.typescriptlang.org/play?ssl=35&ssc=19&pln=1&pc=1#code/DYUwLgBA9gRgVhAvBA3gKApiAiAAmATwAcQBnAegCcQBDAYzGwC4cA9ARgDYA6AZm-YAObABoMWPIRIVq9MAFoAJlAC2zNl24AGbp1HjM2GgHcyqkPKlk6lAJZEFwKDUUhK67KwCsA7fqw4MDQwIMDyRFDABABmtsDAHqw8AEw8Wv4Srgks2MnceckZhmTydFBQANa2IIns+X5iAdhknOGUqrakNTkALL7sRTgA5gCuwESJfTqFjRKj4-I0I2BQRNSxAB5uifx1A7OG80SloDQAdqWkpDva+YPYR6VQZ3Q0jDmseTz7BsNjx7Zook8tN7o84KQABa2M7vNgg7g9MH-eQqNxDCxoxS2GjyACOIzc1WuOWmAmRC2oZxoaNq9RmvweKOoADdFvFEjoAJzcADsFOOpBoVxudXSBz+CxGQ2AgIIwNuPyaEOhsIVPKREuwZygrjaHS6nO4PnYDKasgYtR4fSVEgtCmUag+mht92oBNs1CUnqN-DNdpGFy6BJAL26ODqBXupCgI0odExNGOThc2w+ZN49yspBs9jhnjyPP9hlMMCI9AqkwEIPupfLdAqJ1sNx0wi1dYr8icQzpNfEAF80OJQJBqKQkBAAPLwEAMbihsB2MgAClgcAAlNxqIoRgnl8uNqQRBANuukAA+CAAAwAJChD-2IHeNgBtLQAXQg-avx+wBBolBnBALiKNg65DpgZRnDGoDcN2y5juuQA

Kaneshakang

Answer 7

jq two liner:

 cat package.json | jq   '.dependencies | keys[]' -r | xargs yarn upgrade --latest
 cat package.json | jq   '.devDependencies | keys[]' -r | xargs yarn upgrade --latest

Bike