- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.750 --> 00:00:03.070
In this guide, we are gonna walk through
2
00:00:03.070 --> 00:00:07.190
how our dependencies are managed in our application.
3
00:00:07.190 --> 00:00:10.800
Now, we've already seen our list of node_modules.
4
00:00:10.800 --> 00:00:15.540
That's our directory that stores the dependency code
5
00:00:15.540 --> 00:00:18.780
but how do we define the version
6
00:00:18.780 --> 00:00:21.690
and the actual list of the dependencies
7
00:00:21.690 --> 00:00:23.690
that our application is gonna use?
8
00:00:23.690 --> 00:00:28.020
Well, that is what is handled by our package.json file,
9
00:00:28.020 --> 00:00:30.420
and then also our package.lock file
10
00:00:30.420 --> 00:00:32.220
but we'll talk about that later.
11
00:00:32.220 --> 00:00:35.390
So we have in our package.json file,
12
00:00:35.390 --> 00:00:36.610
we have two lists.
13
00:00:36.610 --> 00:00:39.150
We have our dependencies list
14
00:00:39.150 --> 00:00:42.860
and then we have our devDependencies list.
15
00:00:42.860 --> 00:00:45.300
So what's the difference between these two?
16
00:00:45.300 --> 00:00:48.490
Our devDependencies are only used
17
00:00:48.490 --> 00:00:52.280
in our local development environment.
18
00:00:52.280 --> 00:00:54.230
So these are the dependencies
19
00:00:54.230 --> 00:00:56.020
that are only gonna be needed
20
00:00:56.020 --> 00:00:58.140
for us to build our application.
21
00:00:58.140 --> 00:01:01.280
They're not needed for the application to run.
22
00:01:01.280 --> 00:01:03.950
So that's the key difference between the two.
23
00:01:03.950 --> 00:01:06.000
For all of this course,
24
00:01:06.000 --> 00:01:09.400
we're simply gonna be using the main set
25
00:01:09.400 --> 00:01:10.620
of dependencies here
26
00:01:10.620 --> 00:01:13.760
because the other list is already working.
27
00:01:13.760 --> 00:01:16.130
We're not gonna have to update that at all.
28
00:01:16.130 --> 00:01:20.060
So let's walk through how we can manage our dependencies
29
00:01:20.060 --> 00:01:22.210
because there are a number of ways
30
00:01:22.210 --> 00:01:24.470
of doing it and I wanna show you all
31
00:01:24.470 --> 00:01:26.360
of the most popular ways
32
00:01:26.360 --> 00:01:29.660
so that you can become familiar with each of them.
33
00:01:29.660 --> 00:01:31.690
So we have a pretty long list here
34
00:01:31.690 --> 00:01:35.890
and so how would we add a new dependency?
35
00:01:35.890 --> 00:01:40.510
Well, the first way is to go to the page
36
00:01:40.510 --> 00:01:45.510
on npmjs, so npmjs.com.
37
00:01:45.740 --> 00:01:48.390
And let's go to one,
38
00:01:48.390 --> 00:01:52.450
this is one of my favorites called lodash,
39
00:01:52.450 --> 00:01:53.900
and what lodash does
40
00:01:53.900 --> 00:01:57.020
is it's a very powerful library
41
00:01:57.020 --> 00:01:59.710
that allows you to automate
42
00:01:59.710 --> 00:02:03.430
and really consolidate a lot of algorithmic code.
43
00:02:03.430 --> 00:02:05.080
And if that doesn't make any sense to you,
44
00:02:05.080 --> 00:02:09.010
don't worry, it essentially gives you the ability
45
00:02:09.010 --> 00:02:13.420
to perform tasks that would be much more tricky
46
00:02:13.420 --> 00:02:15.830
if you had to write the code from scratch.
47
00:02:15.830 --> 00:02:20.760
So for example, if you wanted to order a list of items,
48
00:02:20.760 --> 00:02:22.230
and we're actually gonna do this
49
00:02:22.230 --> 00:02:24.920
and you wanna order them by position,
50
00:02:24.920 --> 00:02:27.230
a position value instead of just
51
00:02:27.230 --> 00:02:29.460
how they came in in the array,
52
00:02:29.460 --> 00:02:32.740
lodash has some really helpful tools and functions
53
00:02:32.740 --> 00:02:35.290
that you can run in order to instead
54
00:02:35.290 --> 00:02:37.490
of having to write all that from scratch,
55
00:02:37.490 --> 00:02:39.620
you just call one function in lodash
56
00:02:39.620 --> 00:02:41.070
and it'll automate that.
57
00:02:41.070 --> 00:02:43.810
And so we're gonna get into how to use lodash later on.
58
00:02:43.810 --> 00:02:47.090
For right now, I simply wanna show you how to install it.
59
00:02:47.090 --> 00:02:49.940
So if you go to the npm page,
60
00:02:49.940 --> 00:02:53.130
or also, if you go to the GitHub page in the library,
61
00:02:53.130 --> 00:02:56.690
you'll see that you have a little install script.
62
00:02:56.690 --> 00:03:00.120
So it says npm i lodash.
63
00:03:00.120 --> 00:03:01.950
So I'm just gonna click that and copy it
64
00:03:01.950 --> 00:03:04.510
and let's switch to Visual Studio Code
65
00:03:04.510 --> 00:03:07.170
and I'm gonna open up the terminal here
66
00:03:07.170 --> 00:03:08.850
and you can paste that in.
67
00:03:08.850 --> 00:03:10.800
Now, one thing to note,
68
00:03:10.800 --> 00:03:13.810
the i here is just an alias,
69
00:03:13.810 --> 00:03:15.800
it's short for install.
70
00:03:15.800 --> 00:03:20.470
So you could run npm i and then the name of the library.
71
00:03:20.470 --> 00:03:23.360
You could run npm install and then the name
72
00:03:23.360 --> 00:03:25.830
of the library and also,
73
00:03:25.830 --> 00:03:30.720
you can install multiple libraries at the same time.
74
00:03:30.720 --> 00:03:33.060
So say that you're installing lodash
75
00:03:33.060 --> 00:03:36.600
but you're also installing say react-dnd,
76
00:03:36.600 --> 00:03:38.340
which is a drag-and-drop library,
77
00:03:38.340 --> 00:03:42.070
and then some-other-library,
78
00:03:42.070 --> 00:03:43.790
you can name each one of them,
79
00:03:43.790 --> 00:03:46.860
and you have to have the name exactly the way it is
80
00:03:46.860 --> 00:03:50.230
in their GitHub or in their npm profile
81
00:03:50.230 --> 00:03:51.430
or else it's not gonna work.
82
00:03:51.430 --> 00:03:55.430
But you can install multiple libraries all at the same time.
83
00:03:55.430 --> 00:03:57.170
So I'm just gonna install lodash here.
84
00:03:57.170 --> 00:03:59.040
So I'm gonna hit Return.
85
00:03:59.040 --> 00:04:00.800
And then what's gonna happen here
86
00:04:00.800 --> 00:04:03.450
is this is gonna go up to npm,
87
00:04:03.450 --> 00:04:07.710
it's gonna find the most recent stable version
88
00:04:07.710 --> 00:04:12.710
of lodash, it's going to add it to our package.json file,
89
00:04:13.200 --> 00:04:15.270
to our package.lock file
90
00:04:15.270 --> 00:04:17.720
and to our node_modules.
91
00:04:17.720 --> 00:04:19.610
So you can see that that worked
92
00:04:19.610 --> 00:04:22.560
and don't worry about these warnings for right now.
93
00:04:22.560 --> 00:04:24.050
I'm gonna close this
94
00:04:24.050 --> 00:04:26.670
and if you scroll down here to line 58,
95
00:04:26.670 --> 00:04:29.740
you'll see that lodash has automatically been added
96
00:04:29.740 --> 00:04:32.010
to the package.json file.
97
00:04:32.010 --> 00:04:36.280
Now, if you open up the terminal again and type git status,
98
00:04:36.280 --> 00:04:39.220
you'll see that our package.lock file
99
00:04:39.220 --> 00:04:41.200
has also been updated.
100
00:04:41.200 --> 00:04:42.420
So we're not gonna talk
101
00:04:42.420 --> 00:04:45.240
about the package.lock file right now,
102
00:04:45.240 --> 00:04:47.030
we're gonna save that for the next guide.
103
00:04:47.030 --> 00:04:50.750
Just know that lodash got added to both of these
104
00:04:50.750 --> 00:04:53.940
and then if you open up your node_modules,
105
00:04:53.940 --> 00:04:58.690
you'll see that lodash also got added there as well.
106
00:04:58.690 --> 00:05:01.443
So I'm gonna scroll down to lodash.
107
00:05:03.170 --> 00:05:04.180
If I can find it.
108
00:05:04.180 --> 00:05:06.410
And oh, there it is, right here.
109
00:05:06.410 --> 00:05:08.040
If you do not see it,
110
00:05:08.040 --> 00:05:10.650
just click the little Refresh Explorer
111
00:05:10.650 --> 00:05:11.927
and it will update it.
112
00:05:11.927 --> 00:05:15.260
And you can see, lodash has now been added
113
00:05:15.260 --> 00:05:17.070
and now we can actually work with it.
114
00:05:17.070 --> 00:05:19.540
So what that means is that we could now go
115
00:05:19.540 --> 00:05:21.660
into the lodash documentation
116
00:05:21.660 --> 00:05:24.370
and start running those functions right
117
00:05:24.370 --> 00:05:26.080
in the React application,
118
00:05:26.080 --> 00:05:27.590
so right in a component.
119
00:05:27.590 --> 00:05:30.290
So that is the way that that works.
120
00:05:30.290 --> 00:05:32.660
Now, let's talk about a few
121
00:05:32.660 --> 00:05:36.510
of the other ways that you could install a library.
122
00:05:36.510 --> 00:05:40.000
So first, let's actually delete lodash.
123
00:05:40.000 --> 00:05:43.200
And don't worry, we're gonna reinstall it later on
124
00:05:43.200 --> 00:05:44.480
but as you can see right here,
125
00:05:44.480 --> 00:05:49.460
we're using lodash version 4.17.5.
126
00:05:49.460 --> 00:05:52.720
And I'm just going to keep that in mind.
127
00:05:52.720 --> 00:05:56.530
Lemme just copy this.
128
00:05:56.530 --> 00:05:59.480
And lemme also verify here.
129
00:05:59.480 --> 00:06:03.930
Yes, okay, so we're at lodash version 4.7.15.
130
00:06:03.930 --> 00:06:04.990
Let's say for some reason,
131
00:06:04.990 --> 00:06:07.620
we didn't want to run that script
132
00:06:07.620 --> 00:06:10.900
and so we didn't wanna take the latest stable version
133
00:06:10.900 --> 00:06:12.890
and we wanna get rid of this.
134
00:06:12.890 --> 00:06:15.440
You can simply delete it just like that.
135
00:06:15.440 --> 00:06:18.350
Delete that line, hit Save,
136
00:06:18.350 --> 00:06:22.210
and now type npm install.
137
00:06:22.210 --> 00:06:25.050
Now what is gonna happen
138
00:06:25.050 --> 00:06:30.010
is our npm installer is gonna look at our files,
139
00:06:30.010 --> 00:06:32.590
it's gonna look at our package.json file,
140
00:06:32.590 --> 00:06:35.730
it's gonna see all of those lists of dependencies
141
00:06:35.730 --> 00:06:37.010
and it's gonna say, oh,
142
00:06:37.010 --> 00:06:41.370
it looks like we actually don't need this lodash one
143
00:06:41.370 --> 00:06:43.910
because it's not included anymore
144
00:06:43.910 --> 00:06:46.820
and so if I type git status,
145
00:06:46.820 --> 00:06:49.080
you can see, both of these have been updated
146
00:06:49.080 --> 00:06:52.570
but we no longer actually have lodash
147
00:06:52.570 --> 00:06:55.330
in our list of dependencies.
148
00:06:55.330 --> 00:06:58.570
So that is how you can remove a package
149
00:06:58.570 --> 00:07:00.323
and it's a very good idea
150
00:07:00.323 --> 00:07:04.490
to keep your entire system as lightweight as possible.
151
00:07:04.490 --> 00:07:06.320
If you stop using a library,
152
00:07:06.320 --> 00:07:09.250
make sure you come to the package.json file.
153
00:07:09.250 --> 00:07:12.190
Delete it and then run npm install
154
00:07:12.190 --> 00:07:14.710
because I have had multiple times
155
00:07:14.710 --> 00:07:18.200
in my career in building out these types of applications
156
00:07:18.200 --> 00:07:20.840
where I forgot to uninstall a package
157
00:07:20.840 --> 00:07:22.313
and then later on,
158
00:07:22.313 --> 00:07:25.260
I would come back or another developer working
159
00:07:25.260 --> 00:07:29.840
on the project would look through this package.json file
160
00:07:29.840 --> 00:07:32.100
and they would see a dependency
161
00:07:32.100 --> 00:07:34.070
and then try to go find
162
00:07:34.070 --> 00:07:35.840
and they'd waste a lot of time trying
163
00:07:35.840 --> 00:07:39.720
to find where that dependency had been used
164
00:07:39.720 --> 00:07:42.020
and what part of the application
165
00:07:42.020 --> 00:07:43.970
was actually running with it.
166
00:07:43.970 --> 00:07:47.210
And so it just is a lot better idea
167
00:07:47.210 --> 00:07:50.320
to make sure that if you're not using a dependency,
168
00:07:50.320 --> 00:07:52.130
that you remove it.
169
00:07:52.130 --> 00:07:54.700
So that's how you can delete a dependency.
170
00:07:54.700 --> 00:07:58.053
Now, how could you change one?
171
00:07:58.053 --> 00:08:00.620
And also, how can you add it in
172
00:08:00.620 --> 00:08:02.270
without running that command?
173
00:08:02.270 --> 00:08:04.500
Well, if you come up here,
174
00:08:04.500 --> 00:08:06.410
and I'm gonna hit Edit, I just hit Edit
175
00:08:06.410 --> 00:08:08.410
to add lodash back in.
176
00:08:08.410 --> 00:08:11.270
Say that I wanted to just install it
177
00:08:11.270 --> 00:08:13.890
and I did not want to run that command,
178
00:08:13.890 --> 00:08:16.610
I could just type it in right here.
179
00:08:16.610 --> 00:08:19.190
So I could go and I could say okay,
180
00:08:19.190 --> 00:08:24.190
I want lodash and I wanna have a specific version of lodash.
181
00:08:24.500 --> 00:08:27.890
I could just come and edit the package.json file
182
00:08:27.890 --> 00:08:30.440
and then add in any version.
183
00:08:30.440 --> 00:08:33.140
So here, say I wanted to use some other version.
184
00:08:33.140 --> 00:08:34.540
I'm not even sure if this one exists
185
00:08:34.540 --> 00:08:39.540
but let's say I wanted to use 14 instead of .15.
186
00:08:39.910 --> 00:08:41.350
I could hit Save here
187
00:08:41.350 --> 00:08:45.010
and then run that command, run npm install
188
00:08:45.010 --> 00:08:47.980
and it would go out and it would get lodash for me.
189
00:08:47.980 --> 00:08:51.040
I'm gonna use the latest stable version here.
190
00:08:51.040 --> 00:08:54.600
I'll hit Save and now run npm install
191
00:08:54.600 --> 00:08:56.080
and then it's gonna go out
192
00:08:56.080 --> 00:08:59.210
and it's going to reinstall lodash for us
193
00:08:59.210 --> 00:09:01.430
so that we have access to it.
194
00:09:01.430 --> 00:09:04.550
So all of that is working properly.
195
00:09:04.550 --> 00:09:08.660
That is how you can first install via a script,
196
00:09:08.660 --> 00:09:12.800
then how you can delete a dependency
197
00:09:12.800 --> 00:09:16.090
and then how you can add it in manually.
198
00:09:16.090 --> 00:09:18.037
So that is what we've done with lodash.
199
00:09:18.037 --> 00:09:20.320
And which also, when you add it in manually,
200
00:09:20.320 --> 00:09:23.013
that gives you the ability to control the version.
201
00:09:23.013 --> 00:09:25.730
Now, we're just gonna do this with a couple more
202
00:09:25.730 --> 00:09:27.490
because I wanna show you something
203
00:09:27.490 --> 00:09:30.010
that may or may not be coming up
204
00:09:30.010 --> 00:09:34.520
on your GitHub because depending on when you are going
205
00:09:34.520 --> 00:09:35.560
through this course,
206
00:09:35.560 --> 00:09:37.630
there's gonna be different versions
207
00:09:37.630 --> 00:09:40.640
for each of the dependencies that we're working with.
208
00:09:40.640 --> 00:09:43.210
And so at the time when I'm filming this,
209
00:09:43.210 --> 00:09:45.540
a couple of the dependencies
210
00:09:45.540 --> 00:09:47.870
have some security vulnerabilities.
211
00:09:47.870 --> 00:09:50.110
They're nothing major, nothing to be worried about
212
00:09:50.110 --> 00:09:52.590
but they're definitely good things to get cleaned up.
213
00:09:52.590 --> 00:09:54.140
So if you go to your GitHub page
214
00:09:54.140 --> 00:09:56.020
and you see something that says this,
215
00:09:56.020 --> 00:09:58.825
we found potential security vulnerabilities
216
00:09:58.825 --> 00:10:03.270
and you can click here where it says view security alerts
217
00:10:03.270 --> 00:10:06.960
and then you can actually see the two items
218
00:10:06.960 --> 00:10:08.690
that are causing those alerts.
219
00:10:08.690 --> 00:10:11.030
So we have serialize-javascript
220
00:10:11.030 --> 00:10:12.630
and then we have braces.
221
00:10:12.630 --> 00:10:16.260
So what you can do is click on each of these items
222
00:10:16.260 --> 00:10:19.930
and it's gonna tell you how you can fix these.
223
00:10:19.930 --> 00:10:22.850
So here, serialize-javascript needs
224
00:10:22.850 --> 00:10:26.970
to be bumped up to version 2.1.1 or greater.
225
00:10:26.970 --> 00:10:31.120
So what I can do is copy this code right here,
226
00:10:31.120 --> 00:10:34.200
open up the package.json file
227
00:10:34.200 --> 00:10:35.790
and I'm gonna scroll down
228
00:10:35.790 --> 00:10:38.640
because one thing you may or may not have noticed,
229
00:10:38.640 --> 00:10:43.640
the package.json dependencies are in alphabetical order
230
00:10:43.850 --> 00:10:46.360
and so that's a good idea to keep it that way
231
00:10:46.360 --> 00:10:49.610
because the longer this dependency list gets,
232
00:10:49.610 --> 00:10:53.030
it makes it much easier to come and reference these.
233
00:10:53.030 --> 00:10:55.590
So for serialize-javascript,
234
00:10:55.590 --> 00:10:59.450
that should come between sass-loader and style-loader.
235
00:10:59.450 --> 00:11:01.270
So I'm just gonna paste that in
236
00:11:01.270 --> 00:11:03.510
and add a comma at the very end.
237
00:11:03.510 --> 00:11:06.930
And then I'm gonna run npm install again.
238
00:11:06.930 --> 00:11:08.587
So I'm gonna open up the terminal.
239
00:11:08.587 --> 00:11:11.568
Run npm install.
240
00:11:11.568 --> 00:11:14.000
Just like this and then it's gonna go out
241
00:11:14.000 --> 00:11:14.833
and it's gonna get
242
00:11:14.833 --> 00:11:19.240
that serialize-JavaScript dependency for me
243
00:11:19.240 --> 00:11:21.620
and it is going to install that.
244
00:11:21.620 --> 00:11:23.300
So that looks good.
245
00:11:23.300 --> 00:11:25.590
Now, one thing, and I'm trying to walk you
246
00:11:25.590 --> 00:11:27.310
through the exact process
247
00:11:27.310 --> 00:11:29.600
that I personally would follow
248
00:11:29.600 --> 00:11:31.752
because I can tell you from experience,
249
00:11:31.752 --> 00:11:34.860
dependency management can be one
250
00:11:34.860 --> 00:11:36.800
of the more frustrating parts
251
00:11:36.800 --> 00:11:39.430
of building an application
252
00:11:39.430 --> 00:11:42.410
because say that that application
253
00:11:42.410 --> 00:11:45.580
or say that that serialize-javascript library,
254
00:11:45.580 --> 00:11:48.490
upgrading it might be what would fix
255
00:11:48.490 --> 00:11:52.370
a smaller, moderate security vulnerability
256
00:11:52.370 --> 00:11:54.420
but that might break
257
00:11:54.420 --> 00:11:57.800
or have a conflict with one of our other dependencies.
258
00:11:57.800 --> 00:12:01.150
So don't simply take what GitHub tells you to do
259
00:12:01.150 --> 00:12:03.590
and just go and do it without thinking.
260
00:12:03.590 --> 00:12:06.991
So as you notice, I didn't implement both
261
00:12:06.991 --> 00:12:10.630
of those code recommendations.
262
00:12:10.630 --> 00:12:12.340
I only did one at a time.
263
00:12:12.340 --> 00:12:13.540
And the reason for that
264
00:12:13.540 --> 00:12:15.270
is because I've had too many times
265
00:12:15.270 --> 00:12:17.630
where the fix they recommended
266
00:12:17.630 --> 00:12:20.060
would actually break the entire application.
267
00:12:20.060 --> 00:12:22.450
So I install one
268
00:12:22.450 --> 00:12:25.400
and then I start up the server
269
00:12:25.400 --> 00:12:29.070
and I make sure that everything is still working.
270
00:12:29.070 --> 00:12:31.000
So let's test that out.
271
00:12:31.000 --> 00:12:32.210
First we have a good sign.
272
00:12:32.210 --> 00:12:33.570
It compiled successfully.
273
00:12:33.570 --> 00:12:35.469
So I'm gonna switch to the browser.
274
00:12:35.469 --> 00:12:37.460
Come here, hit Refresh.
275
00:12:37.460 --> 00:12:38.800
Everything there is working.
276
00:12:38.800 --> 00:12:42.244
So it looks like that serialize-javascript fix
277
00:12:42.244 --> 00:12:45.020
is not breaking anything so we should be good.
278
00:12:45.020 --> 00:12:46.330
Now let's come back
279
00:12:46.330 --> 00:12:49.350
and we're gonna go and see the other one.
280
00:12:49.350 --> 00:12:51.160
This one's called braces.
281
00:12:51.160 --> 00:12:52.490
So if I click on this,
282
00:12:52.490 --> 00:12:56.950
it says to bump braces up to version 2.3.1.
283
00:12:56.950 --> 00:12:58.850
So I'm gonna copy this
284
00:12:58.850 --> 00:13:01.670
and then switch to Visual Studio Code.
285
00:13:01.670 --> 00:13:03.580
I'll stop running the server
286
00:13:03.580 --> 00:13:06.790
and I'm gonna go all the way up
287
00:13:06.790 --> 00:13:08.870
and in between where it says babel
288
00:13:08.870 --> 00:13:11.340
and clean-webpack-plugin.
289
00:13:11.340 --> 00:13:13.931
I'll add braces, followed by a comma.
290
00:13:13.931 --> 00:13:17.380
And then let's run npm install.
291
00:13:17.380 --> 00:13:19.210
This is gonna go out and get that version
292
00:13:19.210 --> 00:13:20.540
of braces for us
293
00:13:20.540 --> 00:13:22.140
and then after that's done,
294
00:13:22.140 --> 00:13:23.070
as you may have guessed,
295
00:13:23.070 --> 00:13:25.240
we're gonna test it out in the browser
296
00:13:25.240 --> 00:13:26.360
to make sure it's working.
297
00:13:26.360 --> 00:13:27.930
So that installed properly
298
00:13:27.930 --> 00:13:31.113
and then npm run start.
299
00:13:32.370 --> 00:13:35.830
And so far, it looks like it is working
300
00:13:35.830 --> 00:13:38.590
and there we go, compiled successfully.
301
00:13:38.590 --> 00:13:40.883
And then let's switch to the portfolio.
302
00:13:41.770 --> 00:13:43.890
Hit Refresh, everything's working.
303
00:13:43.890 --> 00:13:46.580
So that should have taken care of both
304
00:13:46.580 --> 00:13:48.620
of those security vulnerabilities
305
00:13:48.620 --> 00:13:53.430
and also made sure our application's still running smoothly.
306
00:13:53.430 --> 00:13:56.680
So let's just kinda do a little review there
307
00:13:56.680 --> 00:13:58.860
on what we've done in this guide
308
00:13:58.860 --> 00:14:00.840
'cause that was a lot of content.
309
00:14:00.840 --> 00:14:03.820
We looked through the package.json file
310
00:14:03.820 --> 00:14:05.570
and we saw how we were able
311
00:14:05.570 --> 00:14:07.630
to manage our dependencies.
312
00:14:07.630 --> 00:14:12.630
We have the option for simply running a npm install command
313
00:14:13.370 --> 00:14:15.880
that will go, it'll grab the library
314
00:14:15.880 --> 00:14:17.770
at the latest version
315
00:14:17.770 --> 00:14:20.010
and then it will install that
316
00:14:20.010 --> 00:14:21.300
into our application.
317
00:14:21.300 --> 00:14:24.590
It'll update automatically our package.json file,
318
00:14:24.590 --> 00:14:26.210
our package.lock file
319
00:14:26.210 --> 00:14:28.898
and it'll add to our node_modules.
320
00:14:28.898 --> 00:14:31.470
After that, we walk through
321
00:14:31.470 --> 00:14:34.640
how we could delete a Node module.
322
00:14:34.640 --> 00:14:39.170
So we saw how we could simply go to our package.json file,
323
00:14:39.170 --> 00:14:42.090
delete the line and then run npm install,
324
00:14:42.090 --> 00:14:45.100
and that removes it from our library.
325
00:14:45.100 --> 00:14:48.630
After that, we saw how we could change the version
326
00:14:48.630 --> 00:14:49.770
of a library.
327
00:14:49.770 --> 00:14:52.040
So we saw how we were able
328
00:14:52.040 --> 00:14:55.320
to simply go and update the number
329
00:14:55.320 --> 00:14:58.000
and we were able to change that version,
330
00:14:58.000 --> 00:15:00.040
run npm install again
331
00:15:00.040 --> 00:15:04.580
and it would update our entire Node module list.
332
00:15:04.580 --> 00:15:07.328
Lastly, we saw we could add in
333
00:15:07.328 --> 00:15:11.050
an entirely new library manually
334
00:15:11.050 --> 00:15:15.940
by simply updating and editing the package.json file
335
00:15:15.940 --> 00:15:19.520
with the name and the specific version that we needed
336
00:15:19.520 --> 00:15:22.250
and we used the example of being able
337
00:15:22.250 --> 00:15:25.230
to fix a few of the security warnings
338
00:15:25.230 --> 00:15:27.340
that GitHub was telling us about.
339
00:15:27.340 --> 00:15:29.450
Now, one question you might have had,
340
00:15:29.450 --> 00:15:31.030
and this is gonna be the last thing
341
00:15:31.030 --> 00:15:32.960
that we'll talk about in this guide
342
00:15:32.960 --> 00:15:37.330
is that how did GitHub tell us
343
00:15:37.330 --> 00:15:40.320
about a library that wasn't actually
344
00:15:40.320 --> 00:15:42.920
in our package.json file?
345
00:15:42.920 --> 00:15:45.360
That's a very good question to ask
346
00:15:45.360 --> 00:15:49.610
'cause you notice, there wasn't this braces library
347
00:15:49.610 --> 00:15:54.150
and there wasn't that serialize-javascript library
348
00:15:54.150 --> 00:15:57.415
inside of our package.json file.
349
00:15:57.415 --> 00:16:01.630
And if you ask that question to yourself,
350
00:16:01.630 --> 00:16:02.810
that's a great one to ask
351
00:16:02.810 --> 00:16:05.050
and it's a great intro
352
00:16:05.050 --> 00:16:08.470
to what we're gonna be talking about in the next guide,
353
00:16:08.470 --> 00:16:12.470
which is going through the package.lock file.
354
00:16:12.470 --> 00:16:13.700
So stay tuned for that.
355
00:16:13.700 --> 00:16:17.590
We're gonna walk through exactly why it works like that
356
00:16:17.590 --> 00:16:20.250
and also, how you can analyze that file
357
00:16:20.250 --> 00:16:21.503
and how to work with it.