TIL/2021–01–18&19

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

We can put the ^ sign before the semver to make sure it is updated with the most recent minor release just before the major release

And do npm update

Now it has 1.4.0

If we want to update a global package like http-server

npm update packageName -g

npm update http-server -g

— — -

Npm is also an npm package and that is also how you update npm

— — —

Uninstalling packages with npm

npm uninstall packageName

Colors is not part of the node_modules folder and it is also removed as a dependency

If we want to remove a dev dependency

npm uninstall moduleName — save-dev

To uninstall a global package

npm uninstall packageName -g

https://docs.npmjs.com/packages-and-modules

What npm command would I use to see if there are any packages that need updating without installing updates? npm outdated

What flag do you use to save devDependencies to your package.json file?

— save-dev

Which command will ignore developer dependencies when you use npm install?

NODE_ENV=production npm install

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Code with JS

Create a todo list in React

Passing Data Between Components in Angular

React native onboarding chatbot : Part one

Deep dive into Lifecycle architecture component

Introducing the Web Team

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Renzo Regio

Renzo Regio

More from Medium

Week 2: Taking Things Slow

Stable in unstable times…

From Stilettos to Spreadsheets

HIEA 112 Final Assignment