Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Updating Packages with npm

6:38 with Andrew Chalkley

In this video, we'll take a look at the options on how to handle upgrading to newer versions of the dependencies you already have.

Further Reading

Semantic Versioning

  • MAJOR.MINOR.PATCH
  • ^ before a version number means install up to the latest MINOR release.
    • e.g. ^1.1 can install 1.3 if available but not 2.0
  • ~ before a version number means install up to the latest PATCH release.
    • e.g. ~2.0.1 can install 2.0.9 if available but not 2.1.0

Terminal Commands

  • Clear the screen
    • clear

npm Command Line Usage

  • See list of commands

    • npm

  • Installing a packages from package.json

    • npm install

  • Check for outdated packages

    • npm outdated

  • Update packages in your project

    • For local packages npm update
    • For global packages npm update <package name> -g
      • e.g. npm update http-server -g

[MUSIC] 0:00
Everything changes. 0:04
This is especially true when it comes to open source packages. 0:06
With people contributing new features and fixes all the time, 0:09
the version of the package in your project can get out of date pretty quickly. 0:13
NPM has a series of commands to help us keep our project's dependencies 0:18
up to date. 0:22
Let's open up the package.json file and 0:23
take a look at the versions of our dependencies. 0:26
A lot of software uses this style of versioning where you have three numbers 0:29
separated by dots. 0:36
This is knows as semantic versioning or SemVer for short. 0:37
The first number is a major release, meaning if you move from version one to 0:41
two, code that used to work with version one will not work with version two. 0:46
Version one music is incompatible with version two. 0:52
jQuery is a good example of this. 0:56
When jQuery moved from version 1 to 2, support for IE8 and Aleo was removed. 0:58
The second digit is a minor release, meaning if you move from say 1.1 to 1.2, 1:04
your code that you wrote should still work. 1:09
It should be backwardly compatible, but that's not 100% guaranteed. 1:13
Minor releases add new functionality in, hopefully, in a non-destructive way. 1:18
The third digit is for patch releases. 1:23
These are for bug fixes that don't necessarily break backward compatibility. 1:25
It's always a good idea to make sure that you have the latest patch version, 1:30
since newer patches fix bugs that might affect your project. 1:34
This caret in front of the version number instructs 1:38
mpm to install the latest minor release until the next major release. 1:41
Minor releases don't tend to break backward compatibility. 1:47
But some developers may introduce things that could break on a minor release. 1:51
The semantic versioning system is a guideline, not a mandate. 1:56
This character in front of the colors version number here means that it'll 2:01
install all future versions all the way up to and just before version 2.0. 2:06
So it would install 1.2, 2:12
1.3, but not 2.0. 2:18
There's another symbol that you may come across and that's the tilde. 2:24
The tilde in front of a version number instructs MPM to install 2:30
all the patch releases until the next minor release. 2:33
Since pack releases are just book fixes, it shouldn't break code or 2:38
other things you're working on in your project. 2:43
So, it's safe to have this tilde here. 2:46
This means that if 0.8.4 or 0.8.5 is available, that will be installed. 2:48
It will install the most recent version all the way up to the release before 0.9. 2:56
So it would install 0.8.4, 3:02
0.8.5, but not 0.9. 3:09
If you don't include the tilde or caret, it'll install the specific version only. 3:16
Let's remove the tilde, and install and outdated version of colors. 3:21
Now when you type npm install, npm installs that specific version, 3:34
the older version of the colors module. 3:39
There may be a valid reason for installing an older version of a package, 3:43
for example, 3:46
if there was a bug introduced in a newer version that they hadn't fixed yet. 3:47
But we want the latest version. 3:52
How do we know what's out of date and what's not? 3:54
Well, npm has an outdated command, 3:57
that gives you an overview of what's out of date. 3:59
We know that colors is out of date. 4:05
Let's use a special symbol in our package.json file to make sure it will 4:08
always upgrade to the minor release if we do npm install on a new machine. 4:12
We'll use the caret. 4:17
We can't use the npm install command since we've already got version 1.0.0 installed. 4:20
But there's a more up-to-date version, 1.1.2. 4:27
We can use the npm update command to upgrade. 4:31
Oops, I didn't save the file. 4:38
Let's do npm update again. 4:40
And the latest version gets installed. 4:45
Our project is locally up to date. 4:48
If we didn't have a package.json file and we ran the npm update, it would upgrade 4:51
all of the node packages in the node modules folder, to the latest version. 4:57
But since we have a package.json file, and 5:02
the version with the tilde and caret symbols, we have greater control. 5:06
If we type npm outdated again, we'll see no response. 5:12
That means we're all up to date. 5:20
Finally, if you want to update a global package like http server, 5:23
I'm going to do this on my local machine again. 5:28
We would use npm update, the package name, 5:31
in this case it's http-server, with the minus g flag for global. 5:34
If we don't include the package name, it will update all packages. 5:40
Which may take some time and potentially have knock on effects around the system 5:45
and workflow in other projects, so be careful. 5:49
Remember, we don't have a package.json file for our global package to manage 5:52
the version installed, so doing an update may update to a major new release. 5:57
This means the way you used to interact with the package may change completely. 6:02
You've seen how to manage your dependency versions with a package.json file. 6:09
We know that in order to automatically update to the latest patch version, 6:13
we use the tilde symbol. 6:17
And the caret symbol for minor releases. 6:19
This should prevent breakages in our code, include book fixes and other improvements. 6:22
You've also seen how to update global packages like http-server. 6:28
Did you know that npm is an npm package and 6:33
that's exactly how you'd update npm too. 6:35

You need to sign up for Treehouse in order to download course files.

Sign up