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:
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…