76

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?

tutuca
  • 3,444
  • 6
  • 32
  • 54

6 Answers6

126

Upgrade all packages to latest version

yarn upgrade --latest
user2210411
  • 1,497
  • 1
  • 9
  • 7
  • That only upgrades `yarn.lock` for me, how can I make it so that it als updates `package.json`? – Qwerty Aug 19 '23 at 17:15
68

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
braza
  • 4,260
  • 1
  • 26
  • 36
  • 1
    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? – tutuca Dec 19 '16 at 11:56
  • 1
    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. – braza Dec 19 '16 at 15:34
  • 7
    Have you tried `yarn upgrade --latest` command? According to the documentation, as I understood, it updates the package.json as well. – It's actually me Aug 24 '19 at 06:22
40

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

Nux
  • 5,890
  • 13
  • 48
  • 74
  • 4
    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`. – Joshua Pinter Feb 06 '22 at 00:13
15

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.

Paul Razvan Berg
  • 16,949
  • 9
  • 76
  • 114
8

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.

Bruno Lemos
  • 8,847
  • 5
  • 40
  • 51
1

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

OCP30pt1c1l1l43-X1z17
  • 1
  • 1
  • 10