TIL/2021–01–18&19

Renzo Regio

8 min readJan 26, 2021

Day 38 and 39: Treehouse Full Stack JavaScript Techdegree

Today I learned about NPM.

NPM

command line application
Package manager for JavaScript
Use pre-existing open source code in your projects
Commonly used for installing packages in Node.js
Instead of searching online for other people’s code, manually downloading and including them, the package manager lets you install, update and uninstall packages through a standardized way
Helps you keep track of the current version of each package

Packages

Bundles of software
NPM packages are mainly JavaScript code
Packages may include other files too
Images, html, css, typescript but it really depends on what the package does
NPM packages for node projects are called modules
Examples of modules are express (the web framework), passport, etc.

How to find and choose packages?

NPM website

Look at the downloads (popularity), updates, releases, current version
More releases — more updated, less bugs
You can also see (if any) if the build is passing — it is a good indicator.
More forks, watches on github is a good indicator as well
More contributors means that there are more people looking over the module

— —

An NPM package is a bundle of software

NPM packages for node.js projects are called modules

— —

Installing local packages

Typing npm on the console allows you to see all the commands you can use with npm

Ways to install with npm (adding -h means help)

Since we want to install bcrypt and we want to install the latest version, we don’t have to add a version number

Npm goes to the online repository of packages and it asks for the latest version

Npm downloads the package and installs it

Npm then creates a special folder called node modules — you rarely need to interact with this folder

Now that we’ve installed the module, how can we include it in our project?

We can go to the npm website to see how it works or go to the README file in the module’s folder

This is on the README

Then just change myPlaintextPassword to your unsecurePassword

Note: we use the require function with the name of the module to include that module’s code in our app.js file

*used bcryptjs instead because bcrypt has some issues with workspaces

We used npm to install a package — this is known as a local package, meaning it’s local to the project. We’ve included it in our application and we used other people’s programming to generate a hashed password

— — -

Installing global packages

Some packages like command-line apps or utilities are handy for lots of projects

For example, the http-server package makes it easy to start a simple web-server on your computer — we can use it to test any of our static sites

Because we could use this package for any web project it makes sense to install it globally so we wouldn’t need to install it over and over again. So it is always available.

We call always available packages — global packages

-g means global

Now the ajax file can be viewed because we used the http-server module (ajax_example is a folder name)

— — -

Managing dependencies in the package.json file

As we create a project that uses npm modules, we will see that our node_modules folder is filling up with megabytes of package files.

What if you want to use github or git? We don’t want to upload all these packages on github

We also don’t need git to keep track of all those files

There is a simpler way to keep track of packages and their versions — managing package dependency

With JavaScript projects we use a file in the root of the project called package.json — this is what npm uses to manage all the dependencies for the project

To create that file:

We can use:

npm init on the console

— save when adding additional modules to the project

And as you can see we created a package.json file

It received everything we inputted while also looking into the node_modules folder. And as you can see it has the bcrypt and bcryptjs modules and included that as a dependency in our project

Now let’s add another module

Now its part of the dependencies

Let’s now use colors

And it is working

— —

When we post it on github we can add the node_modules folder on the .gitignore file. But having the package.json file added to github.

We don’t need to install everything one by one even though we don’t have the node_modules file. Since there is already a package.json containing the dependencies(modules). We can simple do npm install

And npm will look for the dependencies inside the package.json file and install everything

And it works

— —

Development or dev dependency

These dependencies aren’t needed for your application to run but are used as you work on your project
Example: test framework
The reason why we would want to list this as a development dependency is for us to reduce the amount of unneeded files in production

A popular test framework is mocha (sometimes we only need it for testing — we don’t need it once the project is deployed)

Once its deployed we can use npm install and it will install all dependencies it needs for the project to run

To add mocha as a dev dependency:

npm install mocha — save-dev

And now as you can see it is listed as a dev dependency

We can now use npm test to test our project

— -

When we delete our node_modules again and only want the production environment we can’t use npm install since it will also install the dev environment/dev dependencies

To fix this we can no

NODE_ENV=production npm install

And it will only install the production environment

— — -

Updating packages with npm

Versions of the modules/packages can change in a matter of time

Npm has a series of commands to keep our projects up to date

Semantic versioning or semver = three numbers separated by dots

First digit is a major release: if you move from version 1 to 2, code that you used with version one will not work with version two

Second digit is a minor release: if you move from 1.1 to 1.2 your code should still work. Adds new functionality

Third digit is for patch releases: for bug fixes that don’t necessarily break backward compatibility. It is always best for you to have the newest patch version. So newer patches fix bugs that might affect your project

The ^ sign tells npm to install the latest minor release until the next major release — for colors, all the way up to and just before version 2.0

~1.4.0 instructs npm to install patch releases until the next minor release — so in this case, 1.4.1, 1.4.2 until 1.4.9 before 1.5

If you don’t include the ^ or ~ it will install the specified version only

How do we know what outdated or not?

Npm has an outdated command that gives you an overview on what’s out of date

Just call npm outdated on the console