In modern front-end development, a project often relies on many third-party packages, sometimes dozens or even more than a hundred, so how to detect and upgrade these dependencies becomes a difficult problem.

NPM outdated and NPM Update

Fortunately, NPM provides us with NPM outdated and NPM update.

Go into an older React project, and then perform NPM Outdated, which, as expected, suggests an upgrade.

Then perform NPM update to upgrade. No response???????

Have a look –help, is it using the wrong posture? Try NPM update less. No response +1 😯

NPM update less –save 😓

Wanted is Wanted, but I want to upgrade to Latest 😂

I then looked at the verbose log through NPM update — DD and found that I always ended up with something like this:

Seems to be upgrade hopeless 🤕. I think this may be for the stability of the project consideration? After all, it is very risky to upgrade to a larger version. But it doesn’t make sense to not upgrade the smaller version.

It seems that NPM Update is a lost cause.

So nCU comes!

Artifact ncu

Ncu is nPm-check-updates, which checks and updates dependency packages in package.json to the latest version. Here’s how to use it.

NPM install -g NPM -check-updates

After the installation is complete, you can use npm-check-updates to run commands, or you can use NCU to quickly run commands.

Detect upgradable dependency packages

The react project is still the same as the old one, execute nCU update check:

Well! It looks much clearer and directly shows the latest version that can be upgraded to. Here is only a partial screenshot and the list goes on. . But it’s not a problem, because NCU can be upgraded with one click.

The key to upgrade

Ncu provides us with a one-click upgrade command parameter -u, execute ncu -u.

After the command is executed, the output is long and only the last sentence is selected:

Run npm install to install new versions.
Copy the code

Simply, let a person doubt 😯. When you go to package.json, you can see that you have upgraded to the latest version.

One-click upgrades need to be performed with caution. After all, NCU-U does not consider cross-version compatibility. Some packages may not be compatible with larger versions of the upgrade, so be prepared to change the code.

Global packet detection, on-demand detection

Ncu can also detect global installed packages by executing ncu -g:

Not only that, but if you only need to detect a single package, or if you need to ignore a package, this is an example of how to use the NCU repository:

# upgrade only mocha
ncu mocha
ncu -f mocha
ncu --filter mocha

# upgrade packages that start with "react-"
ncu react-*
ncu "/^react-.*$/"

# upgrade everything except nodemonncu \! nodemon ncu -x nodemon ncu --reject nodemon
# upgrade only chalk, mocha, and react
ncu chalk mocha react
ncu chalk, mocha, react
ncu -f "chalk mocha react"

# upgrade packages that do not start with "react-".ncu \! react-* ncu '/^(? ! react-).*$/' # mac/linux ncu "/^(? ! react-).*$/" # windowsCopy the code

Configuration file mode

If entering various filters on the command line is too cumbersome, a more convenient way to use them is to create a configuration file, such as.ncurc.json

{
  "upgrade": true."reject": ["webpack"."antd"]}Copy the code

Configurable field definition:

  • upgrade: Indicates whether one-click upgrade is required
  • filter: Which modules are to be upgraded
  • reject: Which modules to ignore

Of course, the configuration file name is arbitrary, such as the default routine name:.ncurc.{json,yml,js}. Or you can customize the file name and use –configFileName and –configFilePath to specify the file.

API call

Ncu also exposes apis that allow us to programmatically detect and upgrade dependencies for a project. The following is an example:

const ncu = require('npm-check-updates');

(async() = > {const upgraded = await ncu.run({
    // Pass any cli option
    packageFile: './package.json'.upgrade: true.// Defaults:
    // jsonUpgraded: true,
    // silent: true,
  });

  console.log(upgraded); // {"mypackage": "^2.0.0",... }
  // 'upgrade: false' : returns the upgradable package and the latest version information
	// 'upgrade: true' : returns information about the upgraded package and the latest version}) ();Copy the code

We currently use this feature in scaffolding to upgrade project dependencies.

OK, that’s all about Node dependency detection and upgrade. Have you started using NCU?