Vanilla JavaScript Projects

Installing Dependencies

Anjana Vakil

Anjana Vakil

Software Engineer & Educator
Vanilla JavaScript Projects

Check out a free preview of the full Vanilla JavaScript Projects course

The "Installing Dependencies" Lesson is part of the full, Vanilla JavaScript Projects course featured in this preview video. Here's what you'd learn in this lesson:

Anjana demonstrates how to add third-party dependencies to a project with the `npm install` command. Packages are downloaded from the npm registry and installed in a node_modules directory. Any dependencies of these packages are also installed.


Transcript from the "Installing Dependencies" Lesson

>> So moving on, we were talking about installing stuff. And as I said, we want to be careful when we install stuff because basically when we do npm install some package, npm is going to go grab that package from some stranger that put it on the internet and pull it into our code base.

So right now, we're gonna do what hopefully is a pretty innocuous one [LAUGH], which is a super old package that maybe, I don't know, folks might not have heard of it. It's like an ask key art thing called cowsay, and we're just gonna leave it as a surprise, but maybe you can guess already what it's gonna do.

So if I am now within my, can folks see this terminal? If I'm within my terminal and I run npm install and then the name of a package, cowsay, for example, Sstuff is happening. And so, NPM says, okay, I added 41 packages [LAUGH] and audited even more packages in two seconds.

Auditing is basically checking for any known security vulnerabilities. That's a whole other detail about trying to deal with the complexity of an entire interwebs of people sharing each other's code, that we're not gonna talk too much about. But there's also an NPM fund command if you wanna give some love back to your favorite open source projects.

And the NPM audit is telling us that it didn't find any vulnerabilities, thankfully. So sometimes NPM will be helpful and tell you that it will It knows that there is a problem, a known issue, security-wise, for example, in some of the 40-some packages that just got installed. Okay, so let us try to make sense of what do you mean 41 packages were added?

So now, if I look at my package.json, and is this too big? Is that still legible?
>> Sure.
>> Okay, if I look at my package.json, I have a new addition to the family, which is a dependencies object that only says there's one package [LAUGH] and it's called cowsay, and then it tells me what version of that package I just installed.

And generally, we would want that to be like the latest major version or whatever it is, but you can also install a specific version by doing like NPM install cowsay at two or whatever. In this case I don't think there is cowsay 2.0, but some packages, so let's say a major JavaScript front end framework.

The difference between version two and version three is like an entirely different project, and so you really want to make sure that you know which version you're importing so you can also do all of that. And that's a whole other, we could do a whole day of talking about package versioning, but anyway, what we've got is like a version of cowsay as a dependency of our project.

And we also notice we have some new files and a new folder called node modules. So node modules has now, I'm gonna, say 40 some different folders within it that are all different packages. One of them I recognize, the others I did not type into my command line.

Did you type them into my command line? No, okay, so they just magically appeared all right, cool. So, if we look into one of these perhaps the one that I intended to install, we'll notice that each of them has its own package Jason, and in cowsay there is a whole bunch of other dependencies.

And so now we're getting into, we have a package that I wanted to install as a dependency, that package uses other packages as its dependencies, and guess what? If I go into each one of those, get-stdin or whatever, they have their own package.json, with their own dependencies, maybe, and so this is where all those 40 some odd packages come from.

NPM goes and grabs the entire tree of all of the dependencies that we need, all of the little JavaScripts, all of the little modules, we're gonna talk about that in a second, that we need in order to run the dependencies of our project. So this kind of tree of like dependency to dependency to dependency is, where we get all those packages from.

And that whole tree of all of the stuff going on there is captured or sort of like locked, if you will, in this file package-lock.json, which tells you exactly which version and like the SHA and all of the things, all the details about all these packages. Now, this is not necessarily intended for humans, us, to be reading, but this is one of the ways that we can also make sure that, let's say, if we're installing two different dependencies, but they have conflicting different versions of a dependency that they have, whatever.

NPM is sort of figuring all of this out and warning us about those things, or about missing dependencies, or dependencies it couldn't find anymore, or whatever else, right? So it's using this information to help us do all of this, and to help us keep things updated. So, there's a lot more we could say about that, but we're gonna kind of just trust NPM to do its job and figure out what are all these node modules that we need to run.

And these all get stored in this local node modules directory, which incidentally, when we start talking about like version control and Git and stuff, we generally do not want to check into our code bases. And it can also just be reproduced quite easily by NPM installing a package once you have got its dependencies specified.

So, back up when we have what we just did with npm install is we saved cowsay as, what have I done? As a dependency of our project, where am I? And we have also installed all of the dependencies of that project. And in so doing, we have essentially installed our project, which earlier didn't have any dependencies.

And so, what we have access to now is the entire everything else that is exposed through this package, but if I try to do npm run cowsay, it doesn't know what I'm talking about. If I try to do node cowsay in here, it's also not happy. And so the idea is that these are intended to be run from within the code inside your package.

It's almost they're intended to be sort of private for the for the package to be using, and you may or may not be exposing any of the functionality of these packages with let's say scripts that you can run for as a developer within your package. Or within your main actual script that is running your project, which may or may not be providing a higher level interface to one of these dependencies, or something like that.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now