- Introduce Node Package Manager (npm)
- Introduce npm's online platform
- Ensure your environment is configured to use npm
- Review important concepts related to package management in JavaScript
JavaScript has been around for many years now, and continues to serve as a critical part of the modern, interactive web. There are web developers all over the world writing JavaScript code, each contributing their own bits of work. That's a lot of code! In fact, there is a lot of duplicate code. Multiple web developers, over the years, have solved the same problems over and over.
For these situations, we have JavaScript packages. A package is a file or set of files full of existing, reusable code. They are designed to be shared, allowing many web developers to use the same code in their own projects.
To help organize these packages in relation to our own work, we use npm, or Node Package Manager. In this lesson, we will be discussing how npm works and why it is useful.
While it is important that you learn the critical skills to problem solve with code, it is equally important that we learn how to identify existing code that suits our needs and incorporate it into our projects. We don't need to always be reinventing the wheel and writing code that may already exist.
In fact, with the amount of developers out in the world, it is likely someone else has not only already invented the same wheel, but tested, upgraded and innovated on it so that it is way better than anything we could write ourselves in a short period of time.
Remember, programming is all about providing a solution to a problem. When 'on the job', so to speak, no one gets bonus points for concocting a novel/clever solution to problem for which good open source code already existed.
Before we continue, let's make sure you're environment is all set to work with npm.
npm is automatically installed along with Node.js, which should already be installed on your system if you've worked through the JavaScript coursework. To confirm you have node installed, enter the following into your command line:
node -v
If a version appears, you have Node.js. If, by chance, you do not have Node.js installed, you can use the Node Version Manager to install Node.js and keep it up to date.
You can also double check npm by running the following:
npm -v
A version number should appear in your terminal. If you'd like, you can update npm by entering the following:
npm install --global npm
# or, for short: npm install -g npm
Okay, we've got it installed. But what is npm exactly?
As mentioned, npm is a package manager for JavaScript. This means that npm works with your JavaScript project directories via the command line, allowing you to install packages of preexisting code.
What sort of code? All kinds! Some packages are quite small, like isNumber, a package that has one function: to check if a value is a number. Some packages are much more complicated. Huge libraries and frameworks, including React and Express, are available as npm packages. These larger packages are often themselves built using a combination of other packages.
This modular design, the ability to build a package using other packages, allows for developers to continuously expand the JavaScript universe, creating new, more powerful tools and applications on top of existing, tried and tested code.
All JavaScript labs on Learn.co rely on npm packages for their tests. Many use the
learn-browser
npm package, which is built using hundreds of supporting
packages, including the test framework, Mocha.
The lessons themselves don't actually contain all of these packages' code.
Instead, they contain a list of dependencies in a file called package.json
.
The package.json
file tells you (and npm
) everything about what packages are
required for a specific JavaScript application, listing out each package name.
When we run the command npm install
in a directory where a package.json
file
is present, npm
reads the names of each dependency from the package.json
file and downloads the packages from npmjs.com, where they are hosted.
It then begins installing those packages - BUT! those packages also have
their own package.json
with their own dependencies! npm
must also get
those packages, and if those packages have any dependencies, get them as well.
So on and so on. This is what we refer to as a dependency tree.
If you are working in a local environment running npm install
creates a folder
called node_modules
, which contains all the downloaded packages. Note: the
learn
gem may automatically run npm install
when you fork a new lesson with
it.
When building a project from scratch, you may realize you need some specific
package. We can install packages by running npm install <package_name>
while
inside a project directory. If you do not have a correctly structured
package.json
file, the install will not work!
The package.json
file is a key part of sharing JS code repositories on sites
like GitHub. Instead of having to include all the dependencies' code with every
project, we just include a small file, listing out what npm needs to get for the
project.
The file also typically includes information about the project, such as the name, version, author and license.
The package.json
file is written in JSON, so like an object in JavaScript, it
is always wrapped in curly braces, and includes keys and values. A basic
example:
{
"name": "intro-to-npm-readme",
"version": "1.0.0",
"description": "An introduction to npm and package.json",
"main": "index.js",
"scripts": {
"test": "echo 'hot dog'"
},
"dependencies": {
"learn-browser": "^0.1.17"
},
"repository": {
"type": "git",
"url": "git+https://github.com/learn-co-curriculum/intro-to-npm-readme.git"
},
"author": "flatironschool",
"license": "ISC",
"bugs": {
"url": "https://github.com/learn-co-curriculum/intro-to-npm-readme/issues"
},
"homepage": "https://github.com/learn-co-curriculum/intro-to-npm-readme#readme"
}
In your terminal, if you are in a directory with the above package.json
file
present, running npm test
will return "hot dog." This lesson actually does
include this package.json
file, so try it for yourself!
This works because the command npm test
is saying: "Hey npm, look in
package.json
and find the script with the name of 'test', then execute its
value in the terminal."
Having this file present also means it is possible to install additional packages. There is one dependency already included:
"dependencies": {
"learn-browser": "^0.1.17"
}
Running something like npm install react
will add a second dependency:
"dependencies": {
"learn-browser": "^0.1.17",
"react": "^16.4.1"
}
Try it now! Following, take a look to see just how many dependencies (which
React relies on) have been added to your node_modules
directory.
Since npm relies on a package.json
file, it has a built in command to build
package.json
files. Running npm init
on the command line will begin a series
of prompts, asking about specific content to include in the file. At the end, it
will create a file or edit an existing package.json
file. Very handy when you
are creating your own projects from scratch!
- npm - Node Package Manager, a command line tool for handling packages of reusable JavaScript code
- Node - Node is a JavaScript runtime, allowing JavaScript to be run locally on your computer, instead of in a browser
For all advanced JavaScript lessons, including React and Redux, we rely on npm to set up a lot of things 'under the hood'. The applications we build are made possible by the contributions of thousands of other coders before us!
Remember! While endlessly fun, programming is a means to an ends: we have a problem/our employer has a problem, and we give the computer instructions to crush the problem. If available, open, and secure code already exists do not hesitate to use it! Compared to physical goods, code snippets have less value attributed to novelty (there is a reason you won't see "artisinal code" being sold on Etsy).