All right.
So, let's now finally use NPM for the first time.
And remember, NPM stands for Node Package Manager,
and it's both a software on our computer
and a package repository.
Now, before we jump straight into NPM, let's start
by understanding why we actually need something like NPM.
So, why do we actually need a way of managing packages
or dependencies in our project?
Well, back in the day before we had NPM,
we used to include external libraries right into our HTML.
So, basically using the script tag.
And this would then expose a global variable
that we could use, and actually that's exactly
what we did earlier in our Mapty project.
So, let's actually use or open that here.
So, Mapty and just the index.html file.
And so here it is, and you see that indeed,
we simply included the leaflet.js file basically using
a script tag and did that before or own script
so that our own script could then use the global variable
that was exposed by this library here, right?
Remember that?
Now, this actually creates a couple of problems,
at least in a big project so maybe not
in this particular project that is really small,
but in a huge project and a huge team,
this is just not manageable.
First, it doesn't make much sense having the HTML loading
all of JavaScript, that is just really messy.
Also many times we would actually download a library file
to our computer directly, for example,
a jQuery JavaScript file.
But then whenever a new version would come out,
we would have to manually go to the site,
download the new version,
change the file in our file system manually,
and then include it here again, maybe with some other name,
with some other version number.
And that was just a huge pain, believe me.
And a third reason is that before NPM, there simply wasn't
a single repository that contained all the packages
that we might need.
And so this made it even worse and more difficult
to manually download libraries and manage them
on our computers.
So in summary, this all used to be a huge pain
and a huge mess.
And maybe you even remember this yourself,
like the old days of jQuery and dozens of jQuery plugins
that you would have to keep updated.
But anyway, all of this is just to say that we really need
a way to manage our dependencies in a better
and more modern way.
And NPM is exactly how we do that.
And so, let's start by using the NPM software now.
Now right, so actually we will need to this terminal now,
so let me clear it.
And we start by checking if we actually have NPM installed.
So to do that, just type NPM dash V.
So, this will check for diversion
and if you get any number here and it doesn't matter
which one, then you're good.
Well, in fact it should actually be greater than six, okay?
So, anything that you have greater than six is good,
but if you did get an error
because you didn't install Node.js in one of
the previous sections, then please go to this website now.
So, Nodejs.org and then download and install the version
for your computer.
So, you can just use this LTS version,
you don't have to go with the current one.
And by the time you're watching this,
LTS is probably already at 14 or 16 or 18, who knows,
but that doesn't matter.
So, all that matters is that you install Node.js
and then as you run this command,
you just need to get some number here,
and then you're good to go.
Now in each project in which we want to use NPM,
we need to start by initializing it.
And so for that, we write NPM in it,
and this will then ask us a couple of question
in order to create a package.json file.
So, the questions are down here.
So, first the package name, and if we just had enter,
then whatever is here in these parenthesis will be
the default.
And so for now, we are just good with all of these defaults.
So, just keep pressing enter.
And of course you could define things like the author,
keywords or whatever,
but that doesn't really matter for now.
So, is this okay?
Yes, it is.
And then we end up with a special file called package.json,
which is this one.
So, this is the file that NPM just created
for our project here.
Now, this file here is basically what stores
the entire configuration of our project.
So, as you see it's stuff like the project name itself,
the version that we can keep on updating and yeah,
the author and all kinds of stuff.
So for now, that's not really interesting,
but it will be in a second, okay?
Let's just close these files we don't need.
This can become smaller and let's also clear it.
Okay.
And now let's actually install the leaflet library
that we used before, but this time using NPM.
So, let's just search for the documentation page again.
And so here, I already showed it to you before,
but let's take a look at it again.
So here, using a JavaScript package manager,
all we have to do is indeed NPM install leaflet.
And so this is how it will always work.
So, you write NPM to run the NPM program, then install,
and then the name of the package.
So, leaflet like this, and then it will start downloading
and that's it.
Now, that way of installing it,
so this one here was the long version,
but we can also write just NPM I,
and then leaflet like this.
So, that's gonna be the same thing.
And now you'll see that two things happened.
So first of all, in our package.json file,
a new field here was created for the dependencies.
And the dependency that we have here now is leaflet
that we just installed at version 1.6.0, okay?
And more about why this is important
a little bit later again, but for now let's take a look at
the second thing that happened,
which is that we now have this folder called node modules.
And this folder itself contains the leaflet folder,
as you see here, alright?
And so this is the code of this library
and here is some more code,
but that is not really important.
So, you can take a look at it and you will see
that it is like, well 15,000 lines of code or something.
And so, this is not a small library by any means, okay?
And so yeah, this folder contains everything
about this library that we need to include in our page.
And so yeah, this folder simply contains everything
about this package.
And of course the more packages we install,
they will all get stored into the node modules folder.
Okay, so we installed our leaflet library now,
but if we wanted to use it,
that wouldn't be easy without a module bundler.
And that's because this library actually uses
the common JS module system.
So for the reasons that I explained to you before,
and so therefore we cannot directly import it into our code.
We could only do that if later we used a module bundler,
but for now we are not doing that.
And so, let's just not use leaflet for now.
So, this was just to show you how to install it.
So instead, let me show you how we can install
and import one of the most popular JavaScript libraries,
which is Lodash.
So Lodash, like this and Lodash is essentially
a collection of a ton of useful functions for erase,
objects, functions, dates, and more.
So, it's a lot of like functions that could
or should be included in JavaScript, but are not.
And so people simply implemented them in Lodash,
and so now we can use them.
So, down here we have to installation
and here you see again, the old way of doing it
as I explained it before.
So, that would be downloading it
and then including it manually.
Then here we have the NPM way, but there also should be
something else here I'm looking for,
but here is how we actually install it using NPM.
So as always, NPM install and then Lodash.
However, I'm not looking for just the normal Lodash version,
because once again, that one actually uses common JS.
And so we can't use common JS modules without
a module bundler.
And so I'm looking for a special version
and that one is called Lodash ES.
And so, ES is because of ES modules, all right?
So, here we say NPM I for install and then Lodash dash ES,
then wait for it, and here it is in our dependencies.
Let's take a look at it here as well.
So, here is Lodash.
And so here, we now basically have one file for each of
the methods that are available in Lodash,
and you see it is a lot of them, okay?
And the one that I want to include now is the one
for cloning objects.
So, that's called cloneDeep.js.
And so, let's simply import it exactly like we used to do it
so import and well, let's check it out again,
just to show you what the file looks like
and how we can import it.
So, cloneDeep.
So, what matters here is
that it uses export default cloneDeep, okay?
So, it's a default export and so we could give it any name
that we want, but I will still just call it cloneDeep.
And then of course, from and then the path.
So, node modules, Lodash ES and thankfully
a vs code is very helpful by showing us the path.
Okay, let's see.
And we get no errors here, which is already a good sign.
Now, why did I actually include cloneDeep
and not something else?
Well, it's because I actually already mentioned Lodash
before when we talked about copying objects.
So, remember that it's very hard to copy a nested object.
So, let's quickly create one here because I think
that this is pretty interesting.
So, let's say we have some cards in here and this itself is
an array, which itself contains some objects.
So, product bread, and then quantity, let's say five.
And then pizza, let's say five again.
And then we have a user which also has some object,
let's say logged in true.
So, this is a deeply nested object, right?
And so, let's see what happens
when we copy it using JavaScript.
So, state clone, and remember we use object.assign to create
a copy of an object.
And so we create an empty object and then we basically merge
that with the state.
So, let's take a look at the stateClone.
And so indeed it looks exactly the same as the state, right?
However, what happens when we change one of
the nested objects in there?
So, when we now say state dot user dot logged in
and set it to false, then see what happens to the logged in,
in the copy, so you see that it is also false.
And so, that's for all the reasons
that we already learned before.
And so remember that back then I said
that using Lodash would probably be a good idea,
instead of using object dot assign,
because if we wanted to manually create a deep copy
or a deep clone, well, that would be a lot of work.
And so instead we, can simply use this function
that Lodash gives us so that
some people already implement it for us
and which is also battle tested already.
So, cloneDeep state.
And so watch what happens with this one.
So again, this one here is the stateClone,
which of course now changed the logged in to false,
but this one it's also false.
But the reason for that is that we copied the object
after we changed it.
So, that's just wrong, but now it should work.
So again, this one changed to false,
but this one now is still true, even though we changed it
in the original object, okay?
And so this is a good solution for a deep clone
that we just got from NPM.
And that's great, right?
So, we just used a piece of open source software to solve
a problem that we have sometimes in JavaScript.
Great, that's just awesome.
So again, you're now one step closer to working like
a real JavaScript developer,
because this is just what everyone does all the time.
So, this is the function that does the work,
but actually it is this one here,
but well, that's not inspected,
but of course you can have some fun and take a look at
how they implemented this, okay?
But I actually want to go back to this package.json file
because it is actually very important.
So, let's say that you want to move your project
to another computer, or also share it with another developer
or even check it into version control like Git.
Now in all of these scenarios, you should never ever include
the node modules folder.
So again, when you copy your project to somewhere else,
there is no reason to include this huge node modules folder,
because in a real project,
it will actually be really, really huge.
So, I have had a folders here with tens of thousands
of files, and so that will just slow you down.
And it doesn't make much sense either
because all of these files, they are already at NPM.
And so, you can always get them back from there.
But now you might ask, well, if I copy my project without
the node modules folder, so without the dependencies,
will I have to install all of them, one by one?
What if I have 20 or 200 dependencies?
Well, that's again
where this important package.json file comes into play.
So, let's actually simulate that by deleting this folder.
So, move to trash.
And so now of course this does not work anymore,
but there is fortunately a very easy way to get it back.
All we have to do is NPM and then install or I,
but just without any package name.
And so then, NPM will reach into your package.json file,
look at all the dependencies and install them back.
And so, you see that or folder, well, it should be back.
And yeah, so here it is just like before.
Okay.
And so with this, you now have a basic,
but I think good understanding of how to work
with NPM downloading packages and also include them
in your code.
However, importing packages like we did here, for example,
by specifying this entire path is not practical at all.
And so in the next video,
it's time to finally use Parcel to fix this.