JavaScript Development

Node Package Manager – Installing packages

The most common task at the beginning of a project is to install the necessary packages – to do this you’ll use the install command a few times:

npm install react --save

To save a few keystrokes, this can be shorted to:

npm i react -S

npm i react-dom -S

--save or -S install the package to the current project – the packages will show up in the package.json under dependencies with a version number, usually the latest:

  "dependencies": {
    "react": "^16.12.0"

Development dependencies

Not all dependencies need to be in the finished project, stuff like dev tools. To install a package only used during the development phase you can swap to --save-dev or -D:

npm i babel-core -D

This will install development dependencies under devDependencies in the package.json:

  "devDependencies": {
    "babel-core": "^6.26.3"

Multiple packages in one install

If you are installing multiple packages at the same time, you can combine your installs into one line:

npm i babel-core babel-loader babel-preset-react -D

It doesn’t really matter if something has already been installed:

  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "babel-preset-react": "^6.24.1"

If you wanna get really hardcore with your installs, you can use the following syntax to combine common package names:

npm i babel-{core,loader} babel-preset-react -D

This hurts my head though.

Specific versions

If your project has very specific requirements for what packages are used, you can also load specific versions via NPM:

npm install lodash@4.1.8

Or the latest version in a major version:

npm install lodash@^4.0.0

What happens in the background?

Loading just 5 packages seems easy when you look at it like this, but if you check your projects node_modules folder you’ll see alot happened in the background:

Installing packages in NPM installs all the dependencies for every package.

Every package you install also brings with it all of its dependencies – this can add up quickly on a big project. Our 5 packages has installed 83 packages into our node_modules folder.

Not something you’d want to manage manually…