2.14: NPM

Search…
2.14: NPM
Introduction
​NPM (Node Package Manager) is the most popular package manager for Node that allows us to incorporate 3rd-party software packages (aka libraries) in our apps. We will be using npm for the rest of Bootcamp to build more complex apps that rely on 3rd-party packages.
Setup
Create a folder with an NPM project inside it. npm init initialises the NPM project, and the -y flag sets our answers to yes for all of the setup questions.
1
mkdir my-first-npm-project
2
cd my-first-npm-project
3
npm init -y
Copied!
package.json
package.json specifies all configuration for our Node project managed by NPM. It operates similarly to the .git folder in our Git repos that configures everything Git-related for each repo.
We should see something like the following when we open the generated package.json file in VSCode.
1
{
2
  "name": "some-project",
3
  "version": "1.0.0",
4
  "description": "Some Random Stuff.",
5
  "main": "index.js",
6
  "repository": {
7
    "type": "git",
8
    "url": "git+https://github.com/rocketacademy/my-repo.git"
9
  },
10
  "author": "me",
11
  "license": "ISC"
12
}
Copied!
Installing NPM Packages
NPM allows us to download 3rd-party code packages from the Internet to add functionality to our apps without writing too much code ourselves. The following command downloads and installs a package to create ASCII cow images.
1
npm install cows
Copied!
We can engage with NPM packages in several ways. Typically we discover packages through googling and references from google results like tutorials.
1.We can download packages from the command line with npm install.
2.We can visit the NPM website for that package to learn how to use it.
3.We can visit the GitHub repo for that package to see its source code.
Require vs. Import Syntax
So far we've been using import syntax to import Node modules. Before Node version 12 the default syntax was require, and much documentation online still references the old require syntax.
For Rocket's Bootcamp there is no practical difference between import and require, but we will use import where we can for consistency. To use import with Node.js we will need to add the "type": "module" key-value pair to package.json.
Require Syntax
1
const cows = require('cows');
Copied!
Import Syntax
The equivalent statement in import syntax assumes an export default from the imported module. There are no named exports with require syntax.
1
import cows from 'cows';
Copied!
NPM Project Dependencies
After running npm install, our NPM project will now list the installed package as a "dependency", i.e. a package that our app depends on to run properly. NPM will also have installed all of our package's dependencies, and their dependencies ad infinitum. NPM packages almost always depend on other NPM packages, because nobody builds apps from scratch. For example, here is the dependency graph for the eslint NPM package that we have been using since Coding Basics.
3 files will change in our project folder when we run npm install.
package.json
After npm install, NPM adds a new key in package.json called "dependencies" if it doesn't exist already. NPM installs the most recent version of the package as a dependency, and lists the package name and version number in the "dependencies" object in package.json so that other copies of this repo can also retrieve the same package version. If we need a specific package version that is not the latest, we can specify it when we run npm install.
1
{
2
  "name": "some-project",
3
  "version": "1.0.0",
4
  "description": "Some Random Stuff.",
5
  "main": "index.js",
6
  "repository": {
7
    "type": "git",
8
    "url": "git+https://github.com/rocketacademy/my-repo.git"
9
  },
10
  "author": "me",
11
  "license": "ISC",
12
  "dependencies": {
13
    "cows": "^2.1.0"
14
  }
15
}
Copied!
package-lock.json
After npm install, NPM creates a file called package-lock.json (if it doesn't exist already) that records version numbers of all dependencies of the target package (and the dependencies of those packages, ad infinitum), so that if we reproduced this repo on another computer, we would use the same dependency versions. package-lock.json is managed by NPM and we should never have to manually edit package-lock.json ourselves.
node_modules
After npm install, NPM creates a folder called node_modules (if it doesn't exist already) with the package we installed and all of the packages it depends on. You may notice that there are many more folders in node_modules than packages we installed explicitly, because node_modules contains a folder for every dependency of every dependency. Similar to package-lock.json, node_modules is managed by NPM and we should never need to manually modify code within node_modules.
What to Commit to Git
We should always commit both package.json and package-lock.json to Git so that other computers and team members can access the same versions we are using, eliminating bugs due to version mismatches.
We should avoid committing node_modules to Git, because node_modules can get quite large and everything in node_modules can be installed on an Internet-connected machine by running npm install in the project root folder where package.json is. Committing a large, redundant set of files like node_modules will unnecessarily slow down Git operations, especially pushing and pulling from GitHub.
.gitignore
You may have noticed a file in Rocket repos called .gitignore, and that this file often has a line that says node_modules. This file tells Git which files or folders to ignore when detecting changes. In this case, we have set .gitignore to ignore the node_modules folder so that we never commit node_modules to the repo. Read more about .gitignore here.
Development Dependencies
You may have noticed that ESLint dependencies in the Bootcamp Git repos are stored in a section of package.json called "devDependencies". dev or development dependencies are dependencies used purely for development purposes, which developers do not want to be included in the application package deployed to end users. The primary reason for this is to reduce the size of the app for faster load times.
To install packages to dev dependencies, add the -D flag to npm install commands.
Other Random Packages
Feel free to try some of these packages or any other packages that amuse you.
1.​https://www.npmjs.com/package/h-inator​
2.​https://www.npmjs.com/package/one-liner-joke​
3.​https://www.npmjs.com/package/cat-names​
4.​https://www.npmjs.com/package/awesome-dev-jokes​
5.​https://www.npmjs.com/package/cool-ascii-faces​
6.​https://www.npmjs.com/package/random-tree-names​
7.​https://www.npmjs.com/package/porreta​
8.​https://www.npmjs.com/package/random-joke-getter​
9.​https://www.npmjs.com/package/talk-like-a​
10.​https://www.npmjs.com/package/gitsnap​
11.​https://www.npmjs.com/package/is-satire​
12.​https://www.npmjs.com/package/cat-ascii-faces​
13.​https://www.npmjs.com/package/nerd​
Exercises
1.Follow steps above to initialise a new NPM project and install the cows package.
2.Look for the index.js file in the cows package we installed in node_modules. Are you able to understand the code?