All language subtitles for 9. Introduction to NPM

All right.
1

So, let's now finally use NPM for the first time.
2

And remember, NPM stands for Node Package Manager,
3

and it's both a software on our computer
4

and a package repository.
5

Now, before we jump straight into NPM, let's start
6

by understanding why we actually need something like NPM.
7

So, why do we actually need a way of managing packages
8

or dependencies in our project?
9

Well, back in the day before we had NPM,
10

we used to include external libraries right into our HTML.
11

So, basically using the script tag.
12

And this would then expose a global variable
13

that we could use, and actually that's exactly
14

what we did earlier in our Mapty project.
15

So, let's actually use or open that here.
16

So, Mapty and just the index.html file.
17

And so here it is, and you see that indeed,
18

we simply included the leaflet.js file basically using
19

a script tag and did that before or own script
20

so that our own script could then use the global variable
21

that was exposed by this library here, right?
22

Remember that?
23

Now, this actually creates a couple of problems,
24

at least in a big project so maybe not
25

in this particular project that is really small,
26

but in a huge project and a huge team,
27

this is just not manageable.
28

First, it doesn't make much sense having the HTML loading
29

all of JavaScript, that is just really messy.
30

Also many times we would actually download a library file
31

to our computer directly, for example,
32

a jQuery JavaScript file.
33

But then whenever a new version would come out,
34

we would have to manually go to the site,
35

download the new version,
36

change the file in our file system manually,
37

and then include it here again, maybe with some other name,
38

with some other version number.
39

And that was just a huge pain, believe me.
40

And a third reason is that before NPM, there simply wasn't
41

a single repository that contained all the packages
42

that we might need.
43

And so this made it even worse and more difficult
44

to manually download libraries and manage them
45

on our computers.
46

So in summary, this all used to be a huge pain
47

and a huge mess.
48

And maybe you even remember this yourself,
49

like the old days of jQuery and dozens of jQuery plugins
50

that you would have to keep updated.
51

But anyway, all of this is just to say that we really need
52

a way to manage our dependencies in a better
53

and more modern way.
54

And NPM is exactly how we do that.
55

And so, let's start by using the NPM software now.
56

Now right, so actually we will need to this terminal now,
57

so let me clear it.
58

And we start by checking if we actually have NPM installed.
59

So to do that, just type NPM dash V.
60

So, this will check for diversion
61

and if you get any number here and it doesn't matter
62

which one, then you're good.
63

Well, in fact it should actually be greater than six, okay?
64

So, anything that you have greater than six is good,
65

but if you did get an error
66

because you didn't install Node.js in one of
67

the previous sections, then please go to this website now.
68

So, Nodejs.org and then download and install the version
69

for your computer.
70

So, you can just use this LTS version,
71

you don't have to go with the current one.
72

And by the time you're watching this,
73

LTS is probably already at 14 or 16 or 18, who knows,
74

but that doesn't matter.
75

So, all that matters is that you install Node.js
76

and then as you run this command,
77

you just need to get some number here,
78

and then you're good to go.
79

Now in each project in which we want to use NPM,
80

we need to start by initializing it.
81

And so for that, we write NPM in it,
82

and this will then ask us a couple of question
83

in order to create a package.json file.
84

So, the questions are down here.
85

So, first the package name, and if we just had enter,
86

then whatever is here in these parenthesis will be
87

the default.
88

And so for now, we are just good with all of these defaults.
89

So, just keep pressing enter.
90

And of course you could define things like the author,
91

keywords or whatever,
92

but that doesn't really matter for now.
93

So, is this okay?
94

Yes, it is.
95

And then we end up with a special file called package.json,
96

which is this one.
97

So, this is the file that NPM just created
98

for our project here.
99

Now, this file here is basically what stores
100

the entire configuration of our project.
101

So, as you see it's stuff like the project name itself,
102

the version that we can keep on updating and yeah,
103

the author and all kinds of stuff.
104

So for now, that's not really interesting,
105

but it will be in a second, okay?
106

Let's just close these files we don't need.
107

This can become smaller and let's also clear it.
108

Okay.
109

And now let's actually install the leaflet library
110

that we used before, but this time using NPM.
111

So, let's just search for the documentation page again.
112

And so here, I already showed it to you before,
113

but let's take a look at it again.
114

So here, using a JavaScript package manager,
115

all we have to do is indeed NPM install leaflet.
116

And so this is how it will always work.
117

So, you write NPM to run the NPM program, then install,
118

and then the name of the package.
119

So, leaflet like this, and then it will start downloading
120

and that's it.
121

Now, that way of installing it,
122

so this one here was the long version,
123

but we can also write just NPM I,
124

and then leaflet like this.
125

So, that's gonna be the same thing.
126

And now you'll see that two things happened.
127

So first of all, in our package.json file,
128

a new field here was created for the dependencies.
129

And the dependency that we have here now is leaflet
130

that we just installed at version 1.6.0, okay?
131

And more about why this is important
132

a little bit later again, but for now let's take a look at
133

the second thing that happened,
134

which is that we now have this folder called node modules.
135

And this folder itself contains the leaflet folder,
136

as you see here, alright?
137

And so this is the code of this library
138

and here is some more code,
139

but that is not really important.
140

So, you can take a look at it and you will see
141

that it is like, well 15,000 lines of code or something.
142

And so, this is not a small library by any means, okay?
143

And so yeah, this folder contains everything
144

about this library that we need to include in our page.
145

And so yeah, this folder simply contains everything
146

about this package.
147

And of course the more packages we install,
148

they will all get stored into the node modules folder.
149

Okay, so we installed our leaflet library now,
150

but if we wanted to use it,
151

that wouldn't be easy without a module bundler.
152

And that's because this library actually uses
153

the common JS module system.
154

So for the reasons that I explained to you before,
155

and so therefore we cannot directly import it into our code.
156

We could only do that if later we used a module bundler,
157

but for now we are not doing that.
158

And so, let's just not use leaflet for now.
159

So, this was just to show you how to install it.
160

So instead, let me show you how we can install
161

and import one of the most popular JavaScript libraries,
162

which is Lodash.
163

So Lodash, like this and Lodash is essentially
164

a collection of a ton of useful functions for erase,
165

objects, functions, dates, and more.
166

So, it's a lot of like functions that could
167

or should be included in JavaScript, but are not.
168

And so people simply implemented them in Lodash,
169

and so now we can use them.
170

So, down here we have to installation
171

and here you see again, the old way of doing it
172

as I explained it before.
173

So, that would be downloading it
174

and then including it manually.
175

Then here we have the NPM way, but there also should be
176

something else here I'm looking for,
177

but here is how we actually install it using NPM.
178

So as always, NPM install and then Lodash.
179

However, I'm not looking for just the normal Lodash version,
180

because once again, that one actually uses common JS.
181

And so we can't use common JS modules without
182

a module bundler.
183

And so I'm looking for a special version
184

and that one is called Lodash ES.
185

And so, ES is because of ES modules, all right?
186

So, here we say NPM I for install and then Lodash dash ES,
187

then wait for it, and here it is in our dependencies.
188

Let's take a look at it here as well.
189

So, here is Lodash.
190

And so here, we now basically have one file for each of
191

the methods that are available in Lodash,
192

and you see it is a lot of them, okay?
193

And the one that I want to include now is the one
194

for cloning objects.
195

So, that's called cloneDeep.js.
196

And so, let's simply import it exactly like we used to do it
197

so import and well, let's check it out again,
198

just to show you what the file looks like
199

and how we can import it.
200

So, cloneDeep.
201

So, what matters here is
202

that it uses export default cloneDeep, okay?
203

So, it's a default export and so we could give it any name
204

that we want, but I will still just call it cloneDeep.
205

And then of course, from and then the path.
206

So, node modules, Lodash ES and thankfully
207

a vs code is very helpful by showing us the path.
208

Okay, let's see.
209

And we get no errors here, which is already a good sign.
210

Now, why did I actually include cloneDeep
211

and not something else?
212

Well, it's because I actually already mentioned Lodash
213

before when we talked about copying objects.
214

So, remember that it's very hard to copy a nested object.
215

So, let's quickly create one here because I think
216

that this is pretty interesting.
217

So, let's say we have some cards in here and this itself is
218

an array, which itself contains some objects.
219

So, product bread, and then quantity, let's say five.
220

And then pizza, let's say five again.
221

And then we have a user which also has some object,
222

let's say logged in true.
223

So, this is a deeply nested object, right?
224

And so, let's see what happens
225

when we copy it using JavaScript.
226

So, state clone, and remember we use object.assign to create
227

a copy of an object.
228

And so we create an empty object and then we basically merge
229

that with the state.
230

So, let's take a look at the stateClone.
231

And so indeed it looks exactly the same as the state, right?
232

However, what happens when we change one of
233

the nested objects in there?
234

So, when we now say state dot user dot logged in
235

and set it to false, then see what happens to the logged in,
236

in the copy, so you see that it is also false.
237

And so, that's for all the reasons
238

that we already learned before.
239

And so remember that back then I said
240

that using Lodash would probably be a good idea,
241

instead of using object dot assign,
242

because if we wanted to manually create a deep copy
243

or a deep clone, well, that would be a lot of work.
244

And so instead we, can simply use this function
245

that Lodash gives us so that
246

some people already implement it for us
247

and which is also battle tested already.
248

So, cloneDeep state.
249

And so watch what happens with this one.
250

So again, this one here is the stateClone,
251

which of course now changed the logged in to false,
252

but this one it's also false.
253

But the reason for that is that we copied the object
254

after we changed it.
255

So, that's just wrong, but now it should work.
256

So again, this one changed to false,
257

but this one now is still true, even though we changed it
258

in the original object, okay?
259

And so this is a good solution for a deep clone
260

that we just got from NPM.
261

And that's great, right?
262

So, we just used a piece of open source software to solve
263

a problem that we have sometimes in JavaScript.
264

Great, that's just awesome.
265

So again, you're now one step closer to working like
266

a real JavaScript developer,
267

because this is just what everyone does all the time.
268

So, this is the function that does the work,
269

but actually it is this one here,
270

but well, that's not inspected,
271

but of course you can have some fun and take a look at
272

how they implemented this, okay?
273

But I actually want to go back to this package.json file
274

because it is actually very important.
275

So, let's say that you want to move your project
276

to another computer, or also share it with another developer
277

or even check it into version control like Git.
278

Now in all of these scenarios, you should never ever include
279

the node modules folder.
280

So again, when you copy your project to somewhere else,
281

there is no reason to include this huge node modules folder,
282

because in a real project,
283

it will actually be really, really huge.
284

So, I have had a folders here with tens of thousands
285

of files, and so that will just slow you down.
286

And it doesn't make much sense either
287

because all of these files, they are already at NPM.
288

And so, you can always get them back from there.
289

But now you might ask, well, if I copy my project without
290

the node modules folder, so without the dependencies,
291

will I have to install all of them, one by one?
292

What if I have 20 or 200 dependencies?
293

Well, that's again
294

where this important package.json file comes into play.
295

So, let's actually simulate that by deleting this folder.
296

So, move to trash.
297

And so now of course this does not work anymore,
298

but there is fortunately a very easy way to get it back.
299

All we have to do is NPM and then install or I,
300

but just without any package name.
301

And so then, NPM will reach into your package.json file,
302

look at all the dependencies and install them back.
303

And so, you see that or folder, well, it should be back.
304

And yeah, so here it is just like before.
305

Okay.
306

And so with this, you now have a basic,
307

but I think good understanding of how to work
308

with NPM downloading packages and also include them
309

in your code.
310

However, importing packages like we did here, for example,
311

by specifying this entire path is not practical at all.
312

And so in the next video,
313

it's time to finally use Parcel to fix this.