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
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 latestMINOR
release.- e.g.
^1.1
can install1.3
if available but not2.0
- e.g.
-
~
before a version number means install up to the latestPATCH
release.- e.g.
~2.0.1
can install2.0.9
if available but not2.1.0
- e.g.
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
- e.g.
- For local packages
[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