Many web development projects use different packages. You will often see people talk about packages -- installing them, which ones they like, which ones they don't, how their size compares to others', whether a certain package was useful, etc. Packages are closely related to dependencies -- things your code needs in order to work.
Dependency management can be very complex; we won't go over things like versioning, etc. Different people and teams use different package managers; here, we'll just be using npm
, which is very common.
We won't make a real project, just go over the package management portion of it. If you want to try the commands yourself, you will need:
- node and npm
- a terminal to run the commands in
So what are packages, anyway?
A package is code you want to use in your own project that comes from somewhere else. They can be used either just for the developers -- such as a package that lets you write and run tests for your code -- or in the project itself, such as a library of functions to make it easier to talk to websockets, or a package that gives you pre-made CSS classes to use in your code. Using a package instead of writing it yourself can save you a lot of time, and also make things easier. For example, maybe you don't know (or care to!) how the websocket protocol works, you just want a tool that lets you use it a chat app. Frequently, packages are talked about as dependencies: things your code needs in order to function correctly.
A package manager is a tool you can use to handle packages for you: usually that means you use it to add (install) new packages, remove (uninstall) them, find new ones, etc. npm is a package manager. You could just find the code somewhere online and put it in its own script file in your source folder instead of as a package -- but if that code changes, or gets updated, you have to go find it again, get the new code, put it in yourself ... assuming you even know the code you're using was updated at all.
A package manager like npm also helps you manage which version you should install. It has a registry of the packages, where it stores the packages, their versions, etc. npm's registry is at npmjs.com. Usually it will also take care of installing any dependencies of the packages you've installed, so that they will work.
Quick syntax notes
-
<package_name>
: the name of a single package. The angle brackets (<
and>
) are a common way of showing that you should replace that whole term (<package_name>
) with what you want it to be. Often, when you see angle brackets in documentation, it indicates that the value that goes there is required. You do NOT use the<
and>
when you run the commands. Examples:-
npm view <package_name>
=>npm view react
to view information about a package namedreact
-
npm search <package_name>
=>npm search cool_new_package
to look for a package namedcool_new_package
-
-
[list_of_packages...]
: a list of package names. The square brackets ([
and]
are a common way of showing that something should be a list with a varying number of things inside it. It could have one item or many items. When you see something with square brackets in documentation, that usually means it's optional. You do NOT use the[
and]
when you run the commands. For example,npm install [list_of_packages...]
could be:-
npm install jest chalk request
: install three packages -- one namedjest
, one namedchalk
, and one namedrequest
-
npm install react
: install one package namedreact
-
npm install
: install all of the packages listed in thepackage.json
file
-
- an option is something like
--save-dev
or--depth
: it's used to give the command itself more information, like arguments to a function. Often they have a short form and a long form; e.g., the option for saving something indevDependencies
on annpm
command is written as--save-dev
or-D
. Usually the long version has two dashes (--save-dev
), whereas the short version usually as just one (-D
). We'll use the long versions here (I do when I run them myself, honestly!) because they are easier to understand.
Getting started
Before we can add packages to a project, we need a project to add them to!
Often, you'll be working on a project that already exists, so you won't need to do this, but it's good to know how. It's a great way to create a sandbox to try things in without worrying that you might do something wrong.
npm uses a file called package.json
for getting information about your project, like what dependencies it has. While it contains a lot of other important information, today we'll just focus on what it does for packages (explained more when we address how to add them).
You can make a new project by creating a new folder, and from within that folder, running one of two commands, both of which result in npm making a package.json
file for you.
-
npm init
: starts an interactive app that asks you some questions and then creates apackage.json
file for you -
npm --yes init
: creates a defaultpackage.json
file for you, and doesn't make you answer any questions or pick anything (usually this is what I do to get started, it's faster)
Don't worry if you change your mind about an option you picked, or if you decide you want to add something later; package.json
is just a file, and you can edit it in a text editor afterwards if you like.
If you are using git in your project, make sure you have node_modules
added to your .gitignore
file. You can do that by adding it to the file in a text editor, or by running echo 'node_modules' >> .gitignore
from the command line.
Finding packages
The easiest way to find a package is probably to look at the npm registry's site -- you can search for packages, see how many people have used it, etc., get an idea of how its documentation is, etc. There are a lot of packages available: for whatever you're looking for, there is almost certainly an existing package, if not many, that will do what you need. If you try one and you don't like it, or it's too hard to use, try looking for another!
When you're looking at different packages, it can be helpful to look at the package's Github; this can give you an idea of how active it is, how many issues there are, etc. A package that hasn't been updated in a while isn't necessarily bad or out-of-date -- it may not have needed updates. Similarly, a package with a lot of issues on Github may have that many issues because it has a lot of users; it doesn't mean the package is bad or poorly maintained.
There are also commands you can run to see a lot of the same information from the command-line
(remember, don't use the <
and >
when you run these with real package names!):
-
npm search <package_name>
: look for all packages in the npm registry whose name matches<package_name>
-
npm view <package_name>
: view detailed information about a package, such as its versions, keyswords, description, its own dependencies, etc.
Adding new packages to a project
When you install a package, npm gets the package and puts it into your node_modules
folder, as well as anything else that package itself needs. npm uses your package.json
file to know what packages (and which versions) to install, as well as a lot of other things.
There are two main kinds of dependencies in your package.json
folder: dependencies
and devDependencies
. (There are also other kinds, but we won't worry about them today.)
-
dependencies
are packages your project needs in order to run. If you are using a package likemoment
to handle math involving dates in your project, that would be a package you should have independencies
: it's required for your project to work. -
devDependencies
are packages you want but that your code itself doesn't need to run when it's finished. A tool like TypeScript or Babel that compiles your code is a good example of a commondevDependencies
package: you need it while you're working on the code, but your project itself doesn't need it to run. Something like a testing tool, or a linter, are also good examples of what would belong indevDependencies
.
To add a new package, you use the npm install
command. npm will also add the package information to your package.json
file as a dependency automatically.
(Remember, don't use the [
and ]
when you run these with real package names!)
-
npm install --dry-run [list_of_packages...]
: do everything as if you were going to install these packages, short of actually installing them. -
npm install --save-dev [list_of_packages...]
: install these packages and add them to ourpackage.json
asdevDependencies
-
npm install --save-prod [list_of_packages...]
: install these packages and add them to ourpackage.json
asdependencies
-
npm install --global [list_of_packages...]
: install these packages globally -- if you do this from a project folder, these packages will not be added to yourpackage.json
files in the project. A good example of when you might want to use this is for a tool likecreate-react-app
that helps you start a new project: because you want it to make the project, you don't want to install it locally inside the project.
Dealing with existing packages
If you've just cloned an existing project, the first thing you should do is run npm install
.
Because node_modules
folders get very large very quickly, they are almost always excluded from version control like git. That means that when you clone down a project, any packages you need aren't there yet, and the code won't work.
Once you have packages in a project, you will sometimes need to remove or update them; it's good to also just peruse things every so often, make sure you don't have unnecessary packages left lying around, etc.
-
npm uninstall [list_of_packages...]
: remove the packages listed (can be just one package); this will remove them from yourpackage.json
file as well as from yournode_modules
directory. -
npm list --depth 0
: view list of all packages installed at the top level; to view all packages and all their dependencies, you can donpm list --depth 1000
-
npm la --depth 0
: view list of all packages installed, along with their descriptions at the top level -
npm outdated
: view packages which are behind the desired version
Remember that using tools is a skill, and it takes practice to get good at it; it might feel weird or seem silly, but it can be helpful to make and delete a dozen fake projects just to practice setting them up, wrangling packages, etc.
There are a many more commands, and a lot of different ways to use them; you can read more about them in the documentation for the npm, or by running npm help <command>
to get information about that specific command.
Top comments (4)
Hi, I suggest using
<package>...
instead of[list_of_packages...]
, because it's not optional, and is a placeholder name.For more on
usage
conventions and traditions, I recommend the docopt standard.(--save-prod | --save | -S)
can be omitted, it is the default starting fromnpm 5
Nice :)
Thanks for writing this excellent and beneficial article. It makes things a lot more clear to me. I will start experimenting and learning in a sandbox.